html - horizontal - formulario en linea bootstrap

Bootstrap 3 trata de la diferencia entre xs y sm

Question

Estoy usando col-xs- * para dispositivos móviles en retrato, pero ingenuamente creí que col-sm- * era para dispositivos móviles de paisaje, sin embargo, de acuerdo con la primera respuesta de esta pregunta , de hecho no es así.

Entonces mi pregunta es ¿cómo utilizo efectivamente la estructura col para los teléfonos apaisados?

Mi idea fue:

• col-xs-12 en un móvil vertical
• col-sm-6 en mobile de paisaje (ya que es evidentemente más ancho)

Sin embargo, debido a que sm no es lo que originalmente pensé que era, ¿es esto posible sin cambiar el CSS básico de arranque?

Si miramos un iPhone 6+ por ejemplo, en su orientación horizontal su ancho es de 736px, que aún se considera dentro de los límites de xs.

Entonces todo lo que col-xs-12 en esta ventana se ve absolutamente enorme, lo que hace que las cosas se vean terribles.

En teoría, podría cambiar el punto de interrupción sm a un valor inferior al actual de 768, sin embargo, ¿hay una forma mejor de hacerlo?

¿Tal vez agregando una clase entre xs y sm?

ACTUALIZAR

También encontré este fragmento de otra pregunta, que tiene potencial.

@media only screen and (min-width: 480px) and (max-width: 767px) {
.col-xsl-6{ width: 50%; }
}

Answer 1

Entonces, teniendo en cuenta los consejos de otros, decidí que sería beneficioso hacer una clase de cols xsl según lo sugerido.

A continuación está el CSS.

/* Specifally landscape phones */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.col-xsl-1, .col-xsl-2, .col-xsl-3, .col-xsl-4, .col-xsl-5, .col-xsl-6, .col-xsl-7, .col-xsl-8, .col-xsl-9, .col-xsl-10, .col-xsl-11, .col-xsl-12 {
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xsl-12 {
width: 100%;
}
.col-xsl-11 {
width: 91.66666667%;
}
.col-xsl-10 {
width: 83.33333333%;
}
.col-xsl-9 {
width: 75%;
}
.col-xsl-8 {
width: 66.66666667%;
}
.col-xsl-7 {
width: 58.33333333%;
}
.col-xsl-6 {
width: 50%;
}
.col-xsl-5 {
width: 41.66666667%;
}
.col-xsl-4 {
width: 33.33333333%;
}
.col-xsl-3 {
width: 25%;
}
.col-xsl-2 {
width: 16.66666667%;
}
.col-xsl-1 {
width: 8.33333333%;
}
.col-xsl-pull-12 {
right: 100%;
}
.col-xsl-pull-11 {
right: 91.66666667%;
}
.col-xsl-pull-10 {
right: 83.33333333%;
}
.col-xsl-pull-9 {
right: 75%;
}
.col-xsl-pull-8 {
right: 66.66666667%;
}
.col-xsl-pull-7 {
right: 58.33333333%;
}
.col-xsl-pull-6 {
right: 50%;
}
.col-xsl-pull-5 {
right: 41.66666667%;
}
.col-xsl-pull-4 {
right: 33.33333333%;
}
.col-xsl-pull-3 {
right: 25%;
}
.col-xsl-pull-2 {
right: 16.66666667%;
}
.col-xsl-pull-1 {
right: 8.33333333%;
}
.col-xsl-pull-0 {
right: auto;
}
.col-xsl-push-12 {
left: 100%;
}
.col-xsl-push-11 {
left: 91.66666667%;
}
.col-xsl-push-10 {
left: 83.33333333%;
}
.col-xsl-push-9 {
left: 75%;
}
.col-xsl-push-8 {
left: 66.66666667%;
}
.col-xsl-push-7 {
left: 58.33333333%;
}
.col-xsl-push-6 {
left: 50%;
}
.col-xsl-push-5 {
left: 41.66666667%;
}
.col-xsl-push-4 {
left: 33.33333333%;
}
.col-xsl-push-3 {
left: 25%;
}
.col-xsl-push-2 {
left: 16.66666667%;
}
.col-xsl-push-1 {
left: 8.33333333%;
}
.col-xsl-push-0 {
left: auto;
}
.col-xsl-offset-12 {
margin-left: 100%;
}
.col-xsl-offset-11 {
margin-left: 91.66666667%;
}
.col-xsl-offset-10 {
margin-left: 83.33333333%;
}
.col-xsl-offset-9 {
margin-left: 75%;
}
.col-xsl-offset-8 {
margin-left: 66.66666667%;
}
.col-xsl-offset-7 {
margin-left: 58.33333333%;
}
.col-xsl-offset-6 {
margin-left: 50%;
}
.col-xsl-offset-5 {
margin-left: 41.66666667%;
}
.col-xsl-offset-4 {
margin-left: 33.33333333%;
}
.col-xsl-offset-3 {
margin-left: 25%;
}
.col-xsl-offset-2 {
margin-left: 16.66666667%;
}
.col-xsl-offset-1 {
margin-left: 8.33333333%;
}
.col-xsl-offset-0 {
margin-left: 0;
}
}

Hay que admitir que probablemente sea más fácil esperar a Bootstrap 4 o utilizar LESS CSS, pero si buscas una solución simplista, solo de CSS, entonces esto debería ser el truco.

Answer 2

La manera más fácil sería usar LESS y cambiar el punto de corte sm :

@import "bootstrap.less";
@screen-sm-min: 736px;

http://www.codeply.com/go/g3Qtejhoui

También puede generar una creación de CSS personalizada cambiando la misma variable @screen-sm-min .