1

Primero agradezco me ayuden a formular la pregunta de manera correcta en caso de expresarme de manera equivocada, tengo un row compuesto de 3 columnas de a 4 cada col, pero lo que busco es que no se alinien de manera simétrica, dejare dos imágenes para poderme hacer entender mejor:

Imagen de lo que tengo: introducir la descripción de la imagen aquí

Este es el resultado que deseo obtener: introducir la descripción de la imagen aquí El fragmento de código esta aquí

Como mencionaba mis conocimientos en diseño web son básicos y se como formular mejor la pregunta, agradezco correcciones y apoyo.

1
  • El problema es que al utilizar Bootstrap rows, la segunda row siempre empezará en el borde más inferior de la primera. el 6 abr. 2018 a las 20:37

3 respuestas 3

1

no sé si es necesario que mantengas esa estructura, pero tal vez sólo es cuestión de que reorganices tu grilla:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-xs-4">
          <div class="col-xs-12">
          	<h2>Heading</h2>
          	<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh </p>
          </div>
          <div class="col-xs-12">
          	<h2>Heading</h2>
          	<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh </p>
          </div>
  </div>
    <div class="col-xs-4">
          <div class="col-xs-12">
          	<h2>Heading</h2>
          	<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh</p>
          </div>
          <div class="col-xs-12">
          	<h2>Heading</h2>
          	<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh </p>
          </div>
  </div>
    <div class="col-xs-4">
          <div class="col-xs-12">
          	<h2>Heading</h2>
          	<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, tellus ac cursus commodo, tortor mauris condimentum nibh </p>
          </div>
          <div class="col-xs-12">
          	<h2>Heading</h2>
          	<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh </p>
          </div>
  </div>
</div>

3
  • Ps si no hay otra forma de hacerlo ps creo q seria la única alternativa :/
    – Andrés
    el 6 abr. 2018 a las 20:53
  • Claro, ésta es una salida, a no ser que nos aclares mejor como quisieras lograr lo de tu pregunta. De todos modos espero te sirva :) el 6 abr. 2018 a las 20:56
  • Por cierto, si buscas otra salida, este fiddle te puede ayudar el 6 abr. 2018 a las 20:59
1

Lograrlo con Bootstrap 3 realmente lo veo muy complicado, por la forma como funcionan los elementos "flotados", una opción (que requiere un plugin JavaScrip adicional) sería usar Masonry:

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});
.grid-item-content {
  background: #ddd;
  border: 2px solid hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://masonry.desandro.com/masonry.pkgd.js"></script>
<div class="container-fluid">
  <div class="grid">
    <div class="grid-sizer col-xs-4"></div>
    <div class="grid-item col-xs-4">
      <div class="grid-item-content">1 Cheesecake pastry soufflé liquorice I love chupa chups candy icing. Gummi bears cotton candy oat cake sweet candy powder liquorice. </div>
    </div>
    <div class="grid-item col-xs-4">
      <div class="grid-item-content">2 Cheesecake pastry soufflé liquorice I love chupa chups candy icing. Gummi bears cotton candy oat cake sweet candy powder liquorice. Marzipan I love pie dragée I love dessert. I love muffin tootsie roll cotton candy danish I love biscuit I love. Carrot cake bear claw I love chupa chups donut cake lemon drops. Soufflé cotton candy sesame snaps lollipop marzipan I love jelly-o lemon drops apple pie. Liquorice bear claw I love cake. Cake brownie chocolate cake candy canes tart chupa chups ice cream macaroon. Powder sugar plum cheesecake caramels bonbon. Halvah cotton candy cookie lemon drops. Jujubes gummi bears tootsie roll tootsie roll. Tiramisu tiramisu cheesecake fruitcake liquorice I love. Chupa chups apple pie croissant sugar plum sweet cotton candy candy chocolate cake cupcake.</div>
    </div>
    <div class="grid-item col-xs-4">
      <div class="grid-item-content">3 Cheesecake pastry soufflé liquorice I love chupa chups candy icing. Gummi bears cotton candy oat cake sweet candy powder liquorice. Marzipan I love pie dragée I love dessert. </div>
    </div>
    <div class="grid-item col-xs-4">
      <div class="grid-item-content">4 Cheesecake pastry soufflé liquorice I love chupa chups candy icing. Gummi bears cotton candy oat cake sweet candy powder liquorice. Marzipan I love pie dragée I love dessert. I love muffin tootsie roll cotton candy danish I love biscuit I love. Carrot cake bear claw I love chupa chups donut cake lemon drops. Soufflé cotton candy sesame snaps lollipop marzipan I love jelly-o lemon drops apple pie. </div>
    </div>
    <div class="grid-item col-xs-4">
      <div class="grid-item-content">5 Cheesecake pastry soufflé liquorice I love chupa chups candy icing. Gummi bears cotton candy oat cake sweet candy powder liquorice. Marzipan I love pie dragée I love dessert. I love muffin tootsie roll cotton candy danish I love biscuit I love. Carrot cake bear claw I love chupa chups donut cake lemon drops.</div>
    </div>
    <div class="grid-item col-xs-4">
      <div class="grid-item-content">6 Cheesecake pastry soufflé liquorice I love chupa chups candy icing. Gummi bears cotton candy oat cake sweet candy powder liquorice. Marzipan I love pie dragée I love dessert. I love muffin tootsie roll cotton candy danish I love biscuit I love. Carrot cake bear claw I love chupa chups donut cake lemon drops.</div>
    </div>
    <div class="grid-item col-xs-4">
      <div class="grid-item-content">7 Cheesecake pastry soufflé liquorice I love chupa chups candy icing. Gummi bears cotton candy oat cake sweet candy powder liquorice. Marzipan I love pie dragée I love dessert. I love muffin tootsie roll cotton candy danish I love biscuit I love. Carrot cake bear claw I love chupa chups donut cake lemon drops..</div>
    </div>
  </div>
</div>

1
  • Vale, voy a revisarlo, Gracias.
    – Andrés
    el 6 abr. 2018 a las 22:44
0

quiza esto te ayude:

.padding-0{
    padding-right:0;
    padding-left:0;
}

y en el html:

<div class="row">
   <div class="col-md-2 padding-0">
       //stuff here for this column
   </div>
   <div class="col-md-10 padding-0">
       //stuff here for columns
   </div>
</div>
1
  • lo siento no funciono :/
    – Andrés
    el 6 abr. 2018 a las 20:53

Tu Respuesta

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

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