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中看到的那样，在第三次注释_lockup而不是2x3行之后它出错了它输出1x3 1x2 1x1行。

Answer 1

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

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

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

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

<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>

Answer 2

将每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>

意外行为bootstrap 3

2 个答案: