twitter-bootstrap - 如何在 Bootstrap 中有一个空的 col-md-*？

Question

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

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

Answer 1

使用offsets .您只需要定义第一个偏移量，因为第二个 col 将 float 在第一个 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