用Twitter Bootstrap填满全屏设计

Question

我正在尝试使屏幕完全填满设计，没有任何空白，并且具有响应性。到目前为止，我已经尝试过。

还想调整文本框和登录按钮的大小。 Demo fiddle 结果屏幕 当前输出：

- Tushar Gupta - curioustushar

Answer 1

将-fluid添加到您的container类：

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

即使如此，Bootstrap 会在文档的两侧添加 20px 的内边距，当然 - 您可以像下面这样删除它：

<style type="text/css">
   #full-width {
       padding: 0;
   } 
</style>

<div id="full-width" class="container-fluid">
</div>

Example Fiddle: http://jsfiddle.net/qFKdF/1/

- MackieeE

Answer 2

根据TWB2语法：

替换

<div class="container">

by

<div class="container-fluid">

http://jsfiddle.net/smefhyyr/

- BENARD Patrick

Answer 3

希望这能对您有所帮助，您需要添加自定义的div，并使用width:100%。

.container-full {
margin: 0 auto;
width: 100%;
}

demo

- Venu immadi

Answer 4

一个不要脸的广告，但我刚发布了一个开源项目来解决这个问题。它与Bootstrap很好地协作，但只需几行代码即可实现您想要的外观：

https://github.com/rknell/snappyapps-layout

<div class="sa-container">
    <div class="sa-layout horiztonal">
        <div>Sidebar (obviously you will need to style this with colours etc)</div>
        <div class="grow">Content</div>
    </div>
</div>

- Ryan Knell