Question

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

我无法为此找到一个例子（偏移除外）。有人能帮助我吗？

Answer 1

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

＆＃13;

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

_{注意：我使用xs列大小，因此它适用于代码段框架。}

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

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

＆＃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;

请参阅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>

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

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

2 个答案: