html - imagenes - poner 2 divs en la misma linea

Bootstrap: agregar espacios entre divs

Question

Si mi página usa la row clase Bootstrap, col-md-x y tal para organizar el contenido, ¿cuál sería la forma correcta de crear una distancia semánticamente entre cada div que contenga un elemento completo?

Estoy agregando un div con un relleno entre los divs para simular la brecha, ¿es esta una buena táctica o hay una mejor?

Answer 1

A partir de Bootstrap v4, puede agregar lo siguiente al atributo de clase de su DIV: mt-2 (margin top 2)

<div class="mt-2 col-md-12">
        This will have a two-point top margin!
</div>

Más ejemplos se dan en los documentos: Bootsrap v4 docs

Answer 2

Agregar un relleno entre los divs para simular un espacio puede ser un truco, pero ¿por qué no usar algo que proporciona Bootstrap? Se llama compensaciones. Pero, de nuevo, puede definir una clase en su archivo custom.css (no debe editar el core stylesheet de todos modos) y agregar algo como .gap . Sin embargo, .col-md-offset-* hace el trabajo la mayoría de las veces para mí, lo que me permite dejar un espacio entre los divs con precisión.

En cuanto al espaciado vertical, desafortunadamente, no hay nada configurado de esa manera en Bootstrap 3, por lo que tendrás que inventar tu propia clase personalizada para hacerlo. Por lo general, hago algo como .top-buffer { margin-top:20px; } .top-buffer { margin-top:20px; } . Esto hace el truco, y obviamente, no tiene que ser 20px, puede ser lo que quieras.

Answer 3

Necesité solo una instancia del relleno vertical, así que inserté esta línea en el lugar apropiado para evitar agregar más al CSS. <div style="margin-top:5px"></div>

Answer 4

Una forma alternativa de lograr lo que está solicitando, sin tener problemas en la versión móvil de su sitio web, ( Recuerde que el atributo de margen frenará su diseño receptivo en la versión móvil, por lo que debe agregar un atributo complementario a su elemento como @media (min-width:768px){ ''your-class''{margin:0}} para anular el margen anterior )

es anidar su clase en su div preferido y luego agregar en su clase la opción de margen que desee

como el siguiente ejemplo: HTML

<div class="container">
  <div class="col-md-3 col-xs-12">
   <div class="events">
     <img src="..."  class="img-responsive" alt="...."/>
     <div class="figcaption">
       <h2>Event Title</h2>
       <p>Event Description.</p>
     </div>
   </div>
  </div>
  <div class="col-md-3 col-xs-12">
   <div class="events">
    <img src="..."  class="img-responsive" alt="...."/>
    <div class="figcaption">
     <h2>Event Title</h2>
     <p>Event Description. </p>
    </div>
   </div>
  </div>
  <div class="col-md-3 col-xs-12">
   <div class="events">
    <img src="..."  class="img-responsive" alt="...."/>
    <div class="figcaption">
     <h2>Event Title</h2>
     <p>Event Description. </p>
    </div>
   </div>
  </div>
</div>

Y en su CSS simplemente agrega la opción de margen en su clase, que en este ejemplo es "eventos" como:

.events{
margin: 20px 10px;
}

Con este método, tendrás todo el espacio deseado entre tus divs asegurándote de no frenar nada en las versiones para dispositivos móviles y tabletas de tu sitio web.