twitter-bootstrap 使用 twitter bootstrap 填充全屏设计

Fill full screen design with twitter bootstrap

提问by Tushar Gupta - curioustushar

i am trying to make the screen to fully fill with the design no empty things around and also be responsive i have tried it so far.

我正在尝试使屏幕完全充满设计，周围没有空的东西，并且响应迅速，到目前为止我已经尝试过了。

Also want to Size of text-box and Login button.

还想要文本框和登录按钮的大小。

Demo fiddle

Demo fiddle

Result Screen

结果画面

Current Output

电流输出

回答by MackieeE

Add -fluidto your containerclass:

添加-fluid到您的container班级：

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

Even then, Bootstrap adds 20pxpadding either side of the document, which of course - you can remove like below:

即便如此，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/

示例小提琴：http: //jsfiddle.net/qFKdF/1/

回答by BENARD Patrick

Following TWB 2 syntax :

遵循 TWB 2 语法：

replace

代替

<div class="container">

by

经过

<div class="container-fluid">

http://jsfiddle.net/smefhyyr/

http://jsfiddle.net/smefhyyr/

回答by Venu immadi

hope it will help you, u need to add custom div with width:100%

希望它会帮助你，你需要添加自定义div width:100%

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

demo

演示

回答by Ryan Knell

A shameless plug but I just released an open source project to exactly this issue. It plays nicely with bootstrap but gives you the look you are going for with only a few lines of code:

一个无耻的插件，但我刚刚发布了一个开源项目来解决这个问题。它可以很好地与引导程序一起使用，但只需几行代码即可为您提供所需的外观：

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

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>