Bootstrap 3在容器流體中的全寬div

我試圖在Bootstrap 3 CSS佈局中創建一些「水平條帶」，擴展到瀏覽器窗口的整個大小，因此超出了內容類邊距。這是一個Plunker：http://plnkr.co/edit/6SlNU0ZgFehrBD64r9FG。我發現我可以通過使用container-fluid類來實現這個目標：這意味着有一個包含其他div的div的類，其中一些代表我的「樂隊」，還有一些使用container類。因此，我的相關CSS是：Bootstrap 3在容器流體中的全寬div

div.band { 
    width: 100% !important; 
    background-color: #D7EAD8; 
    color: #323F3F; 
}

和我的HTML：

<div class="container-fluid"> 
    <div class="row band">Hello band</div> 
    <div class="container"> 
    <div class="row">...</div> 
    </div> 
    <div class="row band">Another band</div> 
    <div class="container"> 
    <div class="row">...</div> 
    </div> 
</div>

然而，這並不能完全工作，我一直在「帶」 div的右邊緣得到一些白邊。我不知道Bootstrap的內部，當然我做錯了什麼，有誰能提出一個解決方案，使「帶」全角？

來源

2016-02-11 Naftis

你可以嘗試只是100%與auto

這樣的替換：

.band { 
    width: auto !important; 
    background-color: #D7EAD8; 
    color: #323F3F; 
}

來源

2016-02-11 13:41:58

謝謝，這樣做，我沒有想到，％總和邊框填充和邊距，正如Rodrigo指出的那樣。 – Naftis

當您使用％時，顯示會將邊框，填充和邊距大小相加。

您可以在您的容器中使用box-sizing: border-box;，這將尊重尺寸並解決超出的尺寸。

來源

2016-02-11 13:38:32 RPichioli

在這種情況下，我設置頁面容器中，每塊的方式是這樣的：

div.band { 
 
    background-color: #D7EAD8; 
 
    color: #323F3F; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="band"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     Column content here 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-sm-12"> 
 
     Regular usage of Bootstrap 
 
     </div> 
 
    </div> 
 
    </div>

這樣就不需要.band的寬度。

來源

2016-02-11 13:42:22

Bootstrap 3在容器流體中的全寬div

回答

相關問題