bootstrap网格对齐问题

Question

我希望bootstrap Grid像这样。

但我有这个输出

<div class="row" style="background-color: peru">
        <div class="col-md-4 col-md-offset-4" style="background-color: yellowgreen; text-align: right;">a</div>
        <div class="col-md-4 col-md-offset-8" style="background-color: red; text-align: right">b</div>
    </div>

Answer 1

从第二个div中删除偏移量。

<div class="row" style="background-color: peru">
    <div class="col-md-4 col-md-offset-4" style="background-color: yellowgreen; text-align: right;">a</div>
    <div class="col-md-4" style="background-color: red; text-align: right">b</div>
</div>

偏移从左侧和右侧创建负空间从左边定义8个col空间会强制div从流量中消失。

Demo

Answer 2

使用.col-md-offset-*类将列移到右侧。这些类通过*列增加列的左边距。例如，.col-md-offset-4将.col-md-4移到四列

上

<div class="row" style="background-color: peru">
        <div class="col-md-4 col-md-offset-4" style="background-color: yellowgreen; text-align: right;">a</div>
        <div class="col-md-4" style="background-color: red; text-align: right">b</div>
    </div>

原因点数

1. bootstrap将一个水平行划分为12列宽
2. 偏移意味着按列留下左边距空间
3. 根据您的观点，第一个div是offset=4和length = 4 total = 8列，其余列只有12个
4. 第二个div包含offset = 8 length=4 total = 12，但其长度必须为4列
5. 因为左侧空格只有4列，所以您需要额外增加8列，因此它会移动到新行，它会离开col-md-offset-8这留下8列左边距，其余4列在第二行中占用。

了解更多信息here