Question

我认为这很简单，但由于我是新手，我不知道该怎么做，我搜索过并没有找到任何相关内容。

我希望列占据行宽度的100％，我在下面的例子中用红色边框标记了行。

我知道这是给出这个间距的列的填充但是我还没有找到一种方法来移除填充，保持列之间的间距并使它们填满行。

＆＃13;

.box {
  height: 100px;
  margin-bottom: 20px;
  border: 1px solid rgba(0,0,0,0.2);
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row" style="margin-top:40px;margin-bottom:40px;border-right: 1px solid red;border-left: 1px solid red;">
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
     </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
    </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
    </div>
    <div class="col-xl-3 col-md-4 col-sm-6">
      <div class="box"></div>
    </div>
   </div>
  </div>

＆＃13;

Answer 1

将您的班级从container更改为container-fluid：

<div class="container-fluid">
...
</div>

有关它的更多信息here

Answer 2

试试这个行内的巢行

HTML

<div class="container">
 <div class="row">
  <div class="row">
     <div class="col-*-*">
      <div class="products">
        .......
       </div>
     </div>
  </div>
 </div>
</div>

Link For reference

希望这会有所帮助..

Answer 3

如果问题解决得很好，你应该使用所有div宽度的 100％，否则你可以使用左和右边距（ - ）减去。

Answer 4

删除class＆＃34;容器。然后尝试你将获得全宽行。

Answer 5

要删除行中列之间的空格，在引导程序4中，您可以使用no-gutters，如下所示：

<div class="row no-gutters">
    ...
</div>

使Bootstrap列占据行宽的{100}

5 个答案: