如何让我的Bootstrap网页具有全宽

Question

我在我的Rails应用程序中使用gem 'bootstrap-sass', '~> 2.3.2.2'。

如何让我的导航和男孩内容伸展，所以它是宽度的100％？

我的application.haml看起来像这样：

!!!
%html
  %head
    = favicon_link_tag "/favicon.ico"
    %title= "My website"
    = stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true
    = javascript_include_tag "application", "data-turbolinks-track" => true
    = csrf_meta_tags
  %body
    %header
      %nav
        .container
          .tabbable.tabs-below
            %ul.nav.nav-tabs
              = render 'layouts/navigation'
    #main{:role => "main"}
      .container
        .content
          .row
            .span12
              = render 'layouts/messages'
              = yield
          %footer

然后我有一个包含这些设置的css文件：

$bodyBackground: #fff;
@import "bootstrap";

body { padding-top: 10px; }

@import "bootstrap-responsive";

结果如下：

Answer 1

摆脱.container，.row和.span并用宽度为100％的自己的div替换

Answer 2

只需使用.row-fluid代替.row并更改.container宽度。

预览：http://jsfiddle.net/julienvignolles/x7LkM/

<强> CSS

.container {
    width: 100%;
}

<强> HTML

<div class="container">
    <div class="row-fluid">
        <div class="span12">aaa</div>
    </div>
</div>

Doc：http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem