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

Question

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

我真的找不到这个例子(除了偏移).有人能帮我吗？

Answer 1

使用偏移量.您只需定义第一个偏移量,因为第二个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>

_{注意:我正在使用xs列大小,因此它适用于代码段框架.}

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

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

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

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

Answer 2

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

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

但是,我认为你应该使用补偿