停止 Bootstrap .col 包裹在下面答案

【问题标题】：Stopping Bootstrap .col wrapping undernath停止 Bootstrap .col 包裹在下面
【发布时间】：2016-12-17 04:25:31
【问题描述】：

我的引导 div 有问题，这是我当前在大屏幕上的设置：

------------------------------------
|                        |     2    |
             1           ------------
|                        |     3    |
------------------------ |          |
                         ------------

我的简化代码看起来有点像这样：

<div class="row">
    <div class="col-md-8 col-ms-12 col-sm-12"></div>
    <div class="col-md-4 col-ms-6 col-sm-6"></div>
    <div class="col-md-4 col-ms-6 col-sm-6"></div>
</div>

现在不幸的是，有时 Div 2 会变大，并将 Div 3 推到低于 Div 1 的底部，并且它会包裹在下面。即使低于 Div 1，我怎样才能停止这种情况并让 Div 3 保持在右侧？我已经尝试过 clearfix，但它似乎不起作用！

P.S 我正在使用那个“ms”中小断点作为我安装的额外断点。

【问题讨论】：

您的自定义col-ms-* 断点是否可能导致问题？
我刚刚删除了它们进行测试，但我仍然遇到问题，引导程序是为了防止列正常换行吗？
bootply.com/b2m0PUjBHz - 这是我得到的输出，这是预期的。你认为错了什么？

标签： twitter-bootstrap twitter-bootstrap-3 vertical-alignment col

【解决方案1】：

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

请检查结果：

/* The heart of the matter */
@media (min-width: 992px) {
  .pull-md-right {
    float: right !important;
  }
}

/* Decorations */
.row > div:nth-of-type(1) { background: #9c6; min-height: 200px; }
.row > div:nth-of-type(2) { background: #ff0; min-height: 250px; }
.row > div:nth-of-type(3) { background: #f93; min-height: 150px; }
.row > div {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  padding-top: 6px; 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-8 col-sm-12">1</div>
    <div class="col-md-4 col-sm-6">2</div>
    <div class="col-md-4 col-sm-6 pull-md-right">3</div>
  </div>
</div>

【讨论】：