引导响应实用程序类答案

【问题标题】：Bootstrap Responsive Utility Class引导响应实用程序类
【发布时间】：2015-11-13 17:55:49
【问题描述】：

我有 4 列用于大屏幕，它们将在中屏幕上转到 2 行 2 列。但随后列被推倒并在中等屏幕上向下移动。

我知道响应式实用程序类应该以某种方式修复它，只是不确定如何。

这是我的代码

<div class="container">
        <div class="row">

            <div class="col-lg-3 col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. 
            </div>
            <div class="col-lg-3 col-md-6">Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div class="col-lg-3 col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. 
            </div>
            <div class="col-lg-3 col-md-6">Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>

        </div>
    </div>

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 responsive-design

【解决方案1】：

您必须将clearfix 与utility class 结合使用。由于您只是折叠 col-md-6 上的所有内容，因此在您的第二列之后应用 clearfix（因为您需要两个 @ 中等）。

查看工作示例片段。

/*FOR DEMO ONLY*/

body {
  padding-top: 50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-6">
      <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="well">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    <div class="clearfix visible-md-block"></div>
    <div class="col-lg-3 col-md-6">
      <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="well">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
  </div>
</div>

【讨论】：

感谢@vanburen...确实有效...但是井班是什么？...这只是额外的，还是为了什么？
只是为了更容易看到正在发生的事情（因此示例中的列有明显的划分），仅此而已。