1
<b> <div class="row">
    <div class="col-md-6">
        <div class="fecha"><span class="numero">15</span>&nbsp;<span class="mes">JULIO</span></div>
        <div class="texto">
            <p>Cronograma de matr&iacute;culas</p>
            <span>Fecha de matr&iacute;culas: 15 de julio al 30 de agosto (ordinarias)</span><span><br />1 de septiembre al 30 de septiembre (extraordinarias)</span><span><br /><br /></span></div>
    </div>
</div>
<div class="col-sm-6">
    <h4>Kinder</h4>
    <p>Nacidos entre el 1/09/2012 y el 31/12/2013&nbsp;</p>
</div>
<div class="row">
    <div class="col5 verde push-down">
        <h3>Requisitos</h3>
        <p>C&eacute;dula de ciudadan&iacute;a</p>
        <span>The Happy Room <br />Mrs Linda</span> <span class="hora">Lunch &amp; Recess <br /> 11:30 AM - 00:30 PM</span></div>
    <div class="col5 cafe align-center">
        <h3>Lorem ipsum</h3>
        <p>Donec iaculis</p>
        <span>The Happy Room <br />Mrs Linda</span> <span class="hora">Lunch &amp; Recess <br /> 11:30 AM - 00:30 PM</span></div>
    <div class="col5 amarillo align-center">
        <h3>Lorem ipsum</h3>
        <p>Donec iaculis</p>
        <span>The Happy Room <br />Mrs Linda</span> <span class="hora">Lunch &amp; Recess <br /> 11:30 AM - 00:30 PM</span></div>
    <div class="col5 verde align-center">
        <h3>Lorem ipsum</h3>
        <p>Donec iaculis</p>
        <span>The Happy Room <br />Mrs Linda</span> <span class="hora">Lunch &amp; Recess <br /> 11:30 AM - 00:30 PM</span></div>
</div></b>

Por que mis columnas no se despliegan en linea? al introducir el texto se movieron.

4 respuestas 4

1

La clase que se usa para grillas en Bootstrap es col-sm-5 (no col5 que yo sepa), aunque en realidad deberias poner col-sm-3 para que las cuatro filas esten alineadas correctamente.

1

No funcionan porque el código que muestras tiene serias deficiencias. Menciono algunas de las más evidentes:

  • A menos que lo hayas indicado en alguna parte, Bootstrap ofrece, de manera estándar, solo 12 columnas por fila. Tu estás indicando 20, por eso no quedan alineadas.
  • A menos que usas otro framework, Bootstrap 3.x usa la notación col-xx-n para las columnas.
  • Puedes, por supuesto, cualquier combinación de tamaños de columnas, con la condición que sumen 12:
    • 3 + 3 + 3 + 3
    • 4 + 4 + 4
    • 5 + 5 + 2
    • 6 + 4 + 1 + 1
    • etc.
  • Además es una buena práctica agregar una clase container que envuelva a todo tu contenido.

A continuación, puedes ver tu código funcionando.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="fecha">
        <span class="numero">15</span>&nbsp;
        <span class="mes">JULIO</span>
      </div>
      <div class="texto">
        <p>Cronograma de matr&iacute;culas</p>
        <span>
          Fecha de matr&iacute;culas: 
          15 de julio al 30 de agosto (ordinarias)
        </span>
        <span>
          <br />
          1 de septiembre al 30 de septiembre (extraordinarias)
        </span>
        <span>
          <br />
          <br />
        </span>
      </div>
    </div>
    
    <div class="col-xs-6">
      <h4>Kinder</h4>
      <p>Nacidos entre el 1/09/2012 y el 31/12/2013&nbsp;</p>
    </div>
  </div>
  
  <div class="row">
    <div class="col-xs-3 verde push-down">
      <h3>Requisitos</h3>
      <p>C&eacute;dula de ciudadan&iacute;a</p>
      <span>The Happy Room <br />Mrs Linda</span> 
      <span class="hora">Lunch &amp; Recess 
        <br /> 11:30 AM - 00:30 PM
      </span>
    </div>
    <div class="col-xs-3 cafe align-center">
      <h3>Lorem ipsum</h3>
      <p>Donec iaculis</p>
      <span>The Happy Room <br />Mrs Linda</span>
      <span class="hora">Lunch &amp; Recess 
        <br /> 11:30 AM - 00:30 PM
      </span>
    </div>
    <div class="col-xs-3 amarillo align-center">
      <h3>Lorem ipsum</h3>
      <p>Donec iaculis</p>
      <span>The Happy Room <br />Mrs Linda</span>
      <span class="hora">Lunch &amp; Recess 
        <br /> 11:30 AM - 00:30 PM
      </span>
    </div>
    <div class="col-xs-3 verde align-center">
      <h3>Lorem ipsum</h3>
      <p>Donec iaculis</p>
      <span>The Happy Room <br />Mrs Linda</span>
      <span class="hora">Lunch &amp; Recess 
        <br /> 11:30 AM - 00:30 PM
      </span>
    </div>
  </div>

</div>

0

Viendo tu problema esta en que tienes definida la clase col5 y por eso no hace el espaciado correspondiente.

Cambia esa clase por col-xs-5 (moviles), col-sm-5 (tablets), col-md-5(pantallas medianas), col-lg-5 pantallas largas según el diseño que les vallas a dar, el numero puede cambiar hasta un máximo de 12 y un mínimo de 1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<b> <div class="row">
    <div class="col-md-6">
        <div class="fecha"><span class="numero">15</span>&nbsp;<span class="mes">JULIO</span></div>
        <div class="texto">
            <p>Cronograma de matr&iacute;culas</p>
            <span>Fecha de matr&iacute;culas: 15 de julio al 30 de agosto (ordinarias)</span><span><br />1 de septiembre al 30 de septiembre (extraordinarias)</span><span><br /><br /></span></div>
    </div>
</div>
<div class="col-sm-6">
    <h4>Kinder</h4>
    <p>Nacidos entre el 1/09/2012 y el 31/12/2013&nbsp;</p>
</div>
<div class="row">
    <div class="col-sm-5 verde push-down">
        <h3>Requisitos</h3>
        <p>C&eacute;dula de ciudadan&iacute;a</p>
        <span>The Happy Room <br />Mrs Linda</span> <span class="hora">Lunch &amp; Recess <br /> 11:30 AM - 00:30 PM</span></div>
    <div class="col-sm-5 cafe align-center">
        <h3>Lorem ipsum</h3>
        <p>Donec iaculis</p>
        <span>The Happy Room <br />Mrs Linda</span> <span class="hora">Lunch &amp; Recess <br /> 11:30 AM - 00:30 PM</span></div>
    <div class="col-sm-5 amarillo align-center">
        <h3>Lorem ipsum</h3>
        <p>Donec iaculis</p>
        <span>The Happy Room <br />Mrs Linda</span> <span class="hora">Lunch &amp; Recess <br /> 11:30 AM - 00:30 PM</span></div>
    <div class="col-sm-5 verde align-center">
        <h3>Lorem ipsum</h3>
        <p>Donec iaculis</p>
        <span>The Happy Room <br />Mrs Linda</span> <span class="hora">Lunch &amp; Recess <br /> 11:30 AM - 00:30 PM</span></div>
</div></b>

0

Todas las filas están formadas por columnas, el 100% del ancho de la fila está formado por 12 columnas, la columna se tratará como unidad de medida para el ancho de los contenedores con Bootstrap.

Esto se aplica a las distintas resoluciones que puede tener el documento.

  • xs: resoluciones muy pequeñas como en moviles.

  • xm: resoluciones pequeñas como en tablets.

  • md: resoluciones de escritorio.

  • lg: resoluciones de escritorio más grandes.

por medio de col-resolución-numColumnas asignaremos la clase al contenedor, veamos un ejemplo:

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3">
         Columna 1
    </div>
    <div class="col-xs-12 col-sm-6 col-md-9">
         Columna 2
    </div>
</div>

Este ejemplo visto desde un móvil cada columna ocupará el 100% del ancho. Si lo vemos desde una tablet cada columna ocupará el 50%. Y si lo vemos desde un ordenador se verá la columna 2 que ocupa mucho más que la columna 1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.