Rails Bootstrap Full Width Jumbotron

Question

Итак, я использую бутстрап с рельсами, и я ввел правильный код из документации начальной загрузки, но это не работает. Я также добавил код из других проектов, и все еще моя проблема сохраняется: я не могу получить всю ширину jumbotron (в браузере).

Вот что я пробовал.

1. Переопределение ширины .jumbotron до ширины: 100%! Important;
2. Добавление строки div, за которой следует столбец div с col-lg-12.
3. Изменение Дива .container в .container жидкость

я застрял. Мне интересно, если это проблема с тем, как я установил Bootstrap в моем приложении Rails. Я собираюсь вставить код ниже. Любая помощь всегда приветствуется. Спасибо заранее, интернет.

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' 

EDIT: Проблема решена. Ответ лежит на выходе HTML, который вы можете пройти через проверку элемента. Был дополнительный контейнер 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>