使用 twitter bootstrap 填充全屏设计答案

【问题标题】：Fill full screen design with twitter bootstrap使用 twitter bootstrap 填充全屏设计
【发布时间】：2014-02-06 21:40:51
【问题描述】：

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

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

Demo fiddle

Result Screen

电流输出

【问题讨论】：

标签： jquery html css twitter-bootstrap responsive-design

【解决方案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>

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

【讨论】：

【解决方案2】：

遵循 TWB 2 语法：

替换

<div class="container">

通过

<div class="container-fluid">

http://jsfiddle.net/smefhyyr/

【讨论】：

【解决方案3】：

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

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

demo

【讨论】：

【解决方案4】：

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

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>

【讨论】：