twitter bootstrap - verdes - Evite que las columnas de fluido se rompan en una nueva línea en la pantalla del iPhone
pantalla iphone 6 rayas verticales (3)
En Bootstrap 3, hay un nuevo conjunto de clases CSS para andamios e incluyen funciones que le permiten desactivar el apilamiento en pantallas más pequeñas.
La nueva nomenclatura CSS utiliza "columnas" en lugar de "tramos" y vienen en una variedad de variedades. La variedad "col-xs-" (extra pequeña) le permite configurar una cuadrícula que no se apila, incluso en dispositivos extra pequeños.
Estoy trabajando en mi primer proyecto Bootstrap y estoy un poco atrapado. En la parte superior de la página, quiero un logotipo en el lado izquierdo y dos botones en el lado derecho apilados uno encima del otro. Esto es lo que tengo hasta ahora:
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<img src="/img/logo.png" width="120" />
</div>
<div class="span8">
<a class="btn btn-large" href="#" style="width:100%;"><i class="icon-map-marker"></i> Find Location</a><br />
<a class="btn btn-large" href="#" style="width:100%;"><i class="icon-comment"></i> Call Now</a>
</div>
</div>
</div>
Funciona como se esperaba en un escritorio, pero en el iPhone, la columna span8 se rompe y aparece en la siguiente línea. ¿Hay alguna manera de anular esto?
Solo quiero agregar a la nota en Bootstrap 3. Tuve el mismo problema con las columnas que se envolvían demasiado pronto y no mantuvieron su ancho el tiempo suficiente ("col-lg-6" por ejemplo de la "plantilla de inicio"). Cambiarlo a "col-sm-6" hizo el truco: la referencia para cada tamaño está aquí:
Ese es el comportamiento esperado de la cuadrícula sensible, puede ver el mismo efecto ocurriendo en la página de documentación de arranque (especialmente en la demostración de andamios ) cuando cambia el tamaño de la pantalla. Puede superar esto creando su propia clase para incluir dentro de las etiquetas de span que desea mantener una al lado de la otra en un dispositivo móvil y podemos completarlo envolviéndolo en una consulta de medios que se debe activar en un dispositivo móvil con una pantalla tamaño de 480px o inferior (también conocido como un iphone), de esta manera no afectará la cuadrícula sensible al escritorio hasta que llegue a esa restricción.
CSS
@media all and (max-width: 480px) {
.half {
float: left !important;
width: 50% !important;
}
}
Demostración , intente ver esta demostración en su dispositivo móvil, http://jsfiddle.net/r5VCy/1/show/ .