Question

所以我尝试在bootstrap中创建一个带有两个侧边框的内容框，我遇到了这个问题。

如果我的大内容框中的内容太长，则会按下第二个边框。

我使用普通的Bootstrap 3而没有自定义网格样式。

<div class="container">

<div class="row">

<div class="col-md-8">
</div>

<div class="col-md-offset-1 col-md-3">
</div>

<div class="col-md-offset-9 col-md-3">
</div>

</div>

</div>

这里有两个截图，可以看到我的目标是什么以及我实际得到了什么。

My goal

What i'm getting

提前致谢！

Answer 1

Bootstrap的网格单位基于百分比。每个单元宽8.33％（100％的1/12）。您的前两个div.col加起来为100％宽度：

.col-md-8 = 66.67％

.col-md-offset-1.col-md-3 = 8.33％+ 25％

66.67 + 8.33 + 25 = 100％

这就是为什么你的第三个div.col换行到新的'行'。

因为columns can be nested，这就是我解决问题的方法：

<div class="container">
  <div class="row">
    <div class="col-md-8"></div>
    <div class="col-md-offset-1 col-md-3">
      <div class="row">
       </div class="col-xs-12"></div>
       </div class="col-xs-12"></div>
      </div><!-- .row -->
    </div><!-- .col -->
  </div><!-- .row -->
</div><!-- .container -->

Bootstrap 3 |列中的内容将其他列向下推

1 个答案: