Rails Bootstrap全宽Jumbotron

Question

所以,我正在使用带有rails的bootstrap,我已经从bootstrap文档中输入了正确的代码,但这不起作用.我也从其他项目中输入代码,但我的问题仍然存在:我无法将我的jumbotron变为全宽(浏览器).

这是我尝试过的.

1. 将.jumbotron的宽度覆盖为宽度:100%!important;
2. 添加一个行div,后跟一个带有col-lg-12的列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我已经在应用程序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>