意外行为 bootstrap 3

Question

我正在使用 bootstrap 3 及以下版本将模板转换为网站，但我不理解 bootstrap 在这个特定部分中的这种行为。我已经在 codepen (http://codepen.io/sheez44/pen/wBEKJd)

中重新创建了

<div class="container-fluid comments">
      <div class="container">
        <div class="row comments__titles-lockup">
          <h2 class="comments__title">Comments from our customers</h2>
          <h4 class="comments__subtitle">/\/\/\/\/\/\</h4>
          <h4 class="comments__subtitle">You can ask your question by filling in the form Callback</h4>
        </div> 
        <div class="row comments__container">
          <div class="col-md-4">
            <div class="comment-icon"><span class="fa fa-quote-right"></span></div>
            <div class="comments__lockup">
              <h3 class="comments__author">Paul Demichev</h3>
              <h5 class="comments__job-description">Web designer</h5>
              <p class="comments__comment">When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="comment-icon"><span class="fa fa-quote-right"></span></div>
            <div class="comments__lockup">
              <h3 class="comments__author">Oleg Topanic</h3>
              <h5 class="comments__job-description">Программист</h5>
              <p class="comments__comment">This is a Bank that we trust. Our history of working with Alfa-Bank has about 15 years. We have almost from the base</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="comment-icon"><span class="fa fa-quote-right"></span></div>
            <div class="comments__lockup">
              <h3 class="comments__author">Julia Usina</h3>
              <h5 class="comments__job-description">Повар</h5>
              <p class="comments__comment">In 2010, we came to the conclusion that we need a payroll project. Naturally, we considered the offers of different banks</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="comment-icon"><span class="fa fa-quote-right"></span></div>
            <div class="comments__lockup">
              <h3 class="comments__author">Serdyuk Elena</h3>
              <h5 class="comments__job-description">Студентка</h5>
              <p class="comments__comment">In 2010, we came to the conclusion that we need a payroll project. Naturally, we considered the offers of different banks</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="comment-icon"><span class="fa fa-quote-right"></span></div>
            <div class="comments__lockup">
              <h3 class="comments__author">Kulikov Vlad</h3>
              <h5 class="comments__job-description">Главный механик</h5>
              <p class="comments__comment">When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="comment-icon"><span class="fa fa-quote-right"></span></div>
            <div class="comments__lockup">
              <h3 class="comments__author">Andrey Tikhonov</h3>
              <h5 class="comments__job-description">Сварщик</h5>
              <p class="comments__comment">This is a Bank that we trust. Our history of working with Alfa-Bank has about 15 years. We have almost from the base</p>
            </div>
          </div>
        </div>
      </div> 
    </div>

正如您在 bootstrap 中看到的那样，它在第三个 comments__lockup 之后出错，而不是 2x3 行，它输出 1x3 1x2 1x1 行。

Answer 1

将每 12 列保留在单独的行中：

<div class="container-fluid comments">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                ....your content....
            </div>
            <div class="col-md-4">
                ....your content....
            </div>
            <div class="col-md-4">
                ....your content....
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                ....your content....
            </div>
            <div class="col-md-4">
                ....your content....
            </div>
            <div class="col-md-4">
                ....your content....
            </div>
        </div>
       <div class="row">
            <div class="col-md-4">
                ....your content....
            </div>
            <div class="col-md-4">
                ....your content....
            </div>
            <div class="col-md-4">
                ....your content....
            </div>
        </div>
    </div>
</div>

Answer 2

如果您不想添加更多行，您可以插入：

<div class="clearfix"></div>

当您希望在最后一列之后完成 de row 时。当你有不同高度的单元格时，你需要应用这个来避免这个问题。

如果您要为 Bootstrap 模式（lg、md、sm、xs）设置不同数量的单元格...您需要对这些 clearfix 应用 hidden-X/visible-X，例如:

<div class="row">
    <div class="col-lg-3 col-md-4">...</div>
    <div class="col-lg-3 col-md-4">...</div>
    <div class="col-lg-3 col-md-4">...</div>
    <div class="clearfix visible-md"></div>
    <div class="col-lg-3 col-md-4">...</div>
    <div class="clearfix visible-lg"></div>
    <div class="col-lg-3 col-md-4">...</div>
    <div class="col-lg-3 col-md-4">...</div>
    <div class="clearfix visible-md"></div>
    <div class="col-lg-3 col-md-4">...</div>
    <div class="col-lg-3 col-md-4">...</div>
    <div class="clearfix visible-lg"></div>
</div>

意外行为 bootstrap 3

Unexpected behavior bootstrap 3

twitter-bootstrap

twitter-bootstrap-3