Bootstrap容器不是全寬（屏幕左側和右側的空白處）？

我已經寫了一些標記，爲導航欄上的我的網頁上，現在我想移動到下一個部分，當我加入另一部分不擴大全寬，我注意到：image here Bootstrap容器不是全寬（屏幕左側和右側的空白處）？

我爲該部分添加了白色背景，並且身體的背景爲黑色。下面是一些標記和CSS：

HTML樣本：

<header> 
    <div class="container"> 
     <!-- fun markup here --> 
    </div> 
</header> 
<section id="work"> 
    <div class="container"></div> 
</section>

CSS樣品

section#work { 
    padding: 100px 0; 
    background-color: white; 
}

我相信我已經離開了所有不相關的信息，但如果我沒有漏掉什麼重要的是你也需要，請讓我知道。

來源

2016-01-14 Chris Hodge

嘗試添加容器流體而不是容器。如果還是不行，請創建一個小提琴/ plnkr。我們很容易理解。 –

請提供您的代碼（HTML/CSS/JS）的一個最小工作示例，它重現問題中描述的問題。參見[mcve]和[問]。 – vanburen

這裏的簡單答案是使用container-fluid。

請檢查此琴：https://jsfiddle.net/ya6z789x/1/

正如你所看到的第一個container類（簡單container）具有1170px一組寬度較大的視口，970像素的略小等（它減少爲您減少視尺寸）。第二個示例container-fluid設置爲其父級的100％寬度。這意味着如果您的header元素沒有定義寬度，container-fluid類將拉伸到窗口的整個寬度。

或者，如果您的header元素的寬度爲900px（第三個示例），則將container-fluid直接放置爲子元素將使container-fluid元素的寬度爲900px。請注意，您可能需要展開小提琴的視口才能看到此操作。

來源

2016-01-14 09:09:25

Bootstrap容器不是全寬（屏幕左側和右側的空白處）？

回答

相關問題