Rails Bootstrap 全宽 Jumbotron

Question

所以，我正在使用带有 rails 的引导程序，并且我已经从引导程序文档中放入了正确的代码，但这不起作用。我还输入了其他项目的代码，但我的问题仍然存在：我无法让我的 jumbotron 全宽（浏览器的）。

这是我尝试过的。

1. 将 .jumbotron 的宽度覆盖为 width: 100% !important;
2. 使用 col-lg-12 添加一个行 div，后跟一个列 div。
3. 将 div .container 更改为 .container-fluid

我被困住了。我想知道我在 Rails 应用程序中设置 Bootstrap 的方式是否有问题。我将粘贴下面的代码。任何帮助总是值得赞赏的。提前感谢，互联网。

HTML：

<div class="jumbotron">
   <div class="container">

          <h1>Welcome to Sewingly</h1>
          <p>A community marketplace for knitters, sewists, and other needle artists.</p>

   </div>
</div>

CSS：

@import "bootstrap-sprockets";
@import "bootstrap";

html {
overflow-y: scroll;
}


body {
  padding-top: 60px;
  background-color: #fefefe;
}

.jumbotron {
  background-image: url(http://i1216.photobucket.com/albums/dd370/kjames1581/jtronnew.jpg);
  height: 250px;
  color: white;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0 !important;
  font-weight: bold;
  text-align: center;
  margin-top: -9px;
  p { 
  color: white;
  }
}

js:

    //= require jquery
    //= require jquery_ujs
    //= require bootstrap-sprockets
    //= require turbolinks
    //= require_tree .

和gemfile：

    gem 'bootstrap-sass',       '~> 3.3.0'
    gem 'sass-rails',           '>= 3.2'

编辑：问题已解决。答案在于您可以通过检查元素获得的 HTML 输出。有一个额外的容器 div，因为根据 Michael Hartl 的教程，我已将应用程序 html 中所有生成的内容包装在一个 div 标记的容器中。我删除了那个 div 并解决了问题。

Answer 1

.container-fluid 应该可以工作。您在尝试时是否进行了其他更改？这是一个工作示例：

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

<div class="jumbotron">
  <div class="container-fluid">
    <h1>Welcome to Sewingly</h1>
    <p>A community marketplace for knitters, sewists, and other needle artists.</p>
  </div>
</div>