Rails Bootstrap全宽Jumbotron

Question

所以，我使用带有rails的bootstrap并且我已经从bootstrap文档中输入了正确的代码，但这并不起作用。我也从其他项目中输入了代码，但我的问题仍然存在：我无法将我的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输出。根据Michael Hartl的教程，有一个额外的容器div bc我已经将我所有的内容包装在div标签容器中的应用程序html中。我删除了那个div，问题解决了。

Answer 1

.container-fluid应该有效。你尝试过时是否做了其他改动？这是一个有效的例子：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;