如何在bootstrap中使用空col-md- *?

时间:2015-07-16 04:19:11

标签: twitter-bootstrap

我试图在Bootstrap中有两个不相等的列。 我想在每一侧都有一列(所以如果有1到12列,1和12将为空),col-md-2~5是一列,6~11是另一列。

我无法为此找到一个例子(偏移除外)。有人能帮助我吗?

2 个答案:

答案 0 :(得分:38)

使用offsets。您只需要定义第一个偏移量,因为第二个 col 将浮动在第一个偏移量旁边。



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

<div class="container">
  <div class="row">
    <div style="background:#f99" class="col-xs-4 col-xs-offset-1">Cols 2-5</div>
    <div style="background:#9f9" class="col-xs-6">Cols 6-11</div>
  </div>
</div>
&#13;
&#13;
&#13;

注意:我使用xs列大小,因此它适用于代码段框架。

注意,对于Bootstrap 4,偏移类使用不同的名称。 col-*-offset-*类成为.offset-*

有关便捷的迁移指南,请参阅http://upgrade-bootstrap.bootply.com/

&#13;
&#13;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div style="background:#f99" class="col-4 offset-1">Cols 2-5</div>
        <div style="background:#9f9" class="col-6">Cols 6-11</div>
    </div>
</div>
&#13;
&#13;
&#13;

请参阅https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns

答案 1 :(得分:12)

如果您不想根据您的要求使用偏移量,请使用

<div class="container">
  <div class="row" style="background:red">
     <div class="col-md-1" style="background:yellow">&nbsp;</div>
     <div class="col-md-4" style="background:green">B</div>
     <div class="col-md-6" style="background:red">C</div>
     <div class="col-md-1" style="background:yellow">&nbsp;</div>
  </div>
</div>

但是,我认为你应该使用抵消