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

Question

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

我真的找不到这个例子（除了偏移）。有人能帮我吗？

Answer 1

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

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

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

Answer 2

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

注意：我使用的是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