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

回答

相關問題