是否可以制作自举列＆＃34; snap＆＃34;到位？

时间：2016-08-30 20:30:57

标签： html css twitter-bootstrap twitter-bootstrap-3

我正在玩Bootstrap，我遇到了一个我无法找到解决方案的小问题。可能有一个解决方案，但我无法为我的生活找出要搜索的内容。

我想知道的是，如果有一种方法可以使列彼此对齐，那么一个很大的间隙就不会像小提琴中所示那样出现在左手边的第一个div下面。我希望这个小提琴能够很好地描述这个问题，让别人指出我正确的方向。

a big gap

小提琴：https://jsfiddle.net/DTcHh/24238/

＆＃13;
＆＃13; 
body {
  background: tomato;
}
.container {
  background: white;
  border: 1px solid grey;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

引导网格结构中存在问题。你使用＆＃34;容器＆＃34; ＆＃34; ROW＆＃34; ＆安培; ＆＃34; COL-MD - ＆＃34;这就是你面对问题的原因。

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

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

答案 1 :(得分：0)

当屏幕宽度变为float: right或更多时，您可以将992px属性应用于特定块。我为此目的定义了一个新的特殊类.pull-md-right。

请检查结果：https://jsfiddle.net/glebkema/9dqsj4pk/

＆＃13;
＆＃13; 
@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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题