Twitter bootstrap 引导网格对齐问题_Twitter Bootstrap_Css

Twitter bootstrap 引导网格对齐问题

twitter-bootstrap css

Twitter bootstrap 引导网格对齐问题,twitter-bootstrap,css,Twitter Bootstrap,Css,我期待像这样的引导网格但我有这个输出 A. B 删除第二个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="

我期待像这样的引导网格

但我有这个输出


A.
B

删除第二个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>


A.
B

偏移从左侧创建负空间&从左侧定义8列空间将强制div从流中脱落

删除第二个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>


A.
B

偏移从左侧创建负空间&从左侧定义8列空间将强制div从流中脱落

使用

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


A.
B

原因点

引导将一个水平行划分为12列宽度

偏移意味着按列保留左边距空间

根据您的观点，第一个div是

offset=4

和

length=4

total=8

列，其余列仅为12列中的4列

第二个div包含

offset=8

length=4

total=12

，但其长度必须仅为

列

由于左边的空间只有4列，您将额外提供8列，因此它将移到新行，在那里留下

col-md-offset-8

这将留下8列的左边距，其余4列被第二行占用

有关详细信息，请使用

.col md offset-*