All geek questions in one place

Is it possible to make the bootstrap column “snap” in place?

I play with Bootstrap, and I had a small problem, because of which I can not find a solution. There probably is a solution, but I cannot, for my life, find out what to look for.

What I want to know is if there is a way to make the columns snap to each other, so a large space does not appear, as shown in the violin, below the first div on the left side. I hope the fiddle describes the problem well enough for someone to point me in the right direction.

a big gap

Fiddle: https://jsfiddle.net/DTcHh/24238/

body {
  background: tomato;
}
.container {
  background: white;
  border: 1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200">
        <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>

  <div class="col-md-6 container">
    <h3>Title</h3>
    <p>Paragraph</p>
    <div class="media-container">
      <a href="http://placehold.it/200x200" />
      <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200" />
      <img src="http://placehold.it/200x200" />
      </a>
      <a href="http://placehold.it/200x200" />
      <img src="http://placehold.it/200x200" />
      </a>
    </div>
  </div>
</div>
Run code
+4
source share
2 answers

. "container" "ROW" "COL-MD-", .

Working fiddle:   https://jsfiddle.net/amitmonsterme/veyq6naL/ 

view this tutorial :   http://getbootstrap.com/css/#overview-container
0

float: right , 992px . .pull-md-right.

, : https://jsfiddle.net/glebkema/9dqsj4pk/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

body {
    background: tomato;
}

.container {
    background: white;
    border: 1px solid grey;
}

@media (min-width: 992px) {
  .pull-md-right {
    float: right !important;
  }
}
<div class="container">
  <div class="row">
      <div class="col-md-6">
          <h3>Title 1</h3>
          <p>Paragraph</p>
          <div class="media-container">
              <a href="#"><img src="http://placehold.it/200x200"></a>
              <a href="#"><img src="http://placehold.it/200x200"></a>
              <a href="#"><img src="http://placehold.it/200x200"></a>
              <a href="#"><img src="http://placehold.it/200x200"></a>
              <a href="#"><img src="http://placehold.it/200x200"></a>
          </div>
      </div>

      <div class="col-md-6">
          <h3>Title 2</h3>
          <p>Paragraph</p>
          <div class="media-container">
              <a href="#"><img src="http://placehold.it/200x200"></a>
              <a href="#"><img src="http://placehold.it/200x200"></a>
              <a href="#"><img src="http://placehold.it/200x200"></a>
          </div>
      </div>

      <div class="col-md-6 pull-md-right">
          <h3>Title 3</h3>
          <p>Paragraph</p>
          <div class="media-container">
              <a href="#"><img src="http://placehold.it/200x200"></a>
              <a href="#"><img src="http://placehold.it/200x200"></a>
              <a href="#"><img src="http://placehold.it/200x200"></a>
          </div>
      </div>

      <div class="col-md-6">
          <h3>Title 4</h3>
          <p>Paragraph</p>
          <div class="media-container">
              <a href="#"><img src="http://placehold.it/200x200"></a>
              <a href="#"><img src="http://placehold.it/200x200"></a>
              <a href="#"><img src="http://placehold.it/200x200"></a>
          </div>
      </div>

      <div class="col-md-6 pull-md-right">
          <h3>Title 5</h3>
          <p>Paragraph</p>
          <div class="media-container">
              <a href="#"><img src="http://placehold.it/200x200"></a>
              <a href="#"><img src="http://placehold.it/200x200"></a>
              <a href="#"><img src="http://placehold.it/200x200"></a>
          </div>
      </div>

      <div class="col-md-6">
          <h3>Title 6</h3>
          <p>Paragraph</p>
          <div class="media-container">
              <a href="#"><img src="http://placehold.it/200x200"></a>
              <a href="#"><img src="http://placehold.it/200x200"></a>
              <a href="#"><img src="http://placehold.it/200x200"></a>
          </div>
      </div>
  </div>
</div>
0

Source: https://habr.com/ru/post/1653052/

More articles:


All Articles