Tengo algunos formularios en una página. Tengo los controles agrupados, por lo que hay dos columnas. Mi expectativa es que cuando colapso mi navegador para simular pantallas más pequeñas, las columnas colapsarían en una sola columna, pero todo lo que sucede es que los controles se reducen en ancho y nunca colapsan.

<div class="container">

  <form name="onlineevent" method="post">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-m-6 col-lg-6">
        <p>
          <input style="height: 54px;" type="text" name="onlineeventname" placeholder="Online Event Name">
        </p>
      </div>
      <div class="col-xs-6 col-sm-6 col-m-6 col-lg-6">
        <p>
          <input style="height: 54px;" type="text" name="onlineeventdetails" placeholder="Online Event Details">
        </p>
      </div>
  </form>
  </div>
0
tylerbarton 16 dic. 2016 a las 03:07

2 respuestas

La mejor respuesta

La razón por la que no se reducen a una sola columna es que lo especificó para que ocupe 6 de 12 en todas las pantallas. Es decir, ocupa la mitad del espacio en todos los tamaños de pantalla.

Para arreglarlo reemplazar

col-xs-6 col-sm-6 col-m-6 col-lg-6 con

col-xs-12 col-sm-12 col-md-6 col-lg-6 Aquí tomará 12 de 12 en pantallas pequeñas y extrapequeñas.

Observe que también escribió m en lugar de md.

2
Rahul.A.Krishna 16 dic. 2016 a las 05:58

Estas escribiendo:

<div class="col-xs-6 col-sm-6 col-m-6 col-lg-6">

Pero debería escribir:

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> // note the "md"

De todos modos, puedes escribir solo:

<div class="col-xs-6">

Porque todas sus columnas tienen el mismo ancho.

0
Silvio Delgado 16 dic. 2016 a las 00:21