ruby-on-rails-4 - Rails Bootstrap 全宽 Jumbotron

Question

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

这是我尝试过的。

将 .jumbotron 的宽度覆盖为 width: 100% !important;

添加一个行 div，然后是一个带有 col-lg-12 的列 div。

将 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 bc 根据 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>