使Bootstrap列占据行宽的100％

我认为这很简单，但由于我是自举的新手，我不知道该怎么做，所以我搜索了一下，但没有发现任何关于它的信息。使Bootstrap列占据行宽的100％

我希望列的行宽度达到100％，我在下面的示例中用红色边框标记行。

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

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

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

来源

2017-07-08 Gabriel Souza

更改类从container到container-fluid：

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

更多关于它here

来源

2017-07-08 03:36:44 maRShmallow

容器流体将行扩大到视口宽度的100％，这不是我想要的 –

试试这个窝内排排

HTML

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

Link For reference

希望这有助于..

来源

2017-07-08 03:41:34

它工作，除了Internet Explorer，你知道它可能是什么吗？ –

@GabrielSouza在IE中是什么问题？ –

它完全破坏专栏[看]（http://i.imgur.com/aj9ljVq.jpg） –

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

来源

2017-07-08 03:45:31 Zeeshan

你是什么意思是“使用所有div宽度的100％”？ –

删除类“容器，然后尝试你会得到全宽行

来源

2017-07-09 04:30:16 mybestpatron

要删除的空间列之间行，在引导4，你可以使用no-gutters这样的：

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

来源

2017-10-05 20:49:28

使Bootstrap列占据行宽的100％

回答

相关问题