Rails Bootstrap Full Width Jumbotron

所以，我使用bootstrap与rails，并且我已经从bootstrap文档中提供了正确的代码，但那不起作用。我也从其他项目中输入了代码，但仍然存在问题：我无法让我的jumbotron成为浏览器的全部宽度。Rails Bootstrap Full Width Jumbotron

这是我试过的。

覆盖.jumbotron的宽度为100％！重要;
在col-lg-12中添加一个行div，后跟一个div div。
更改DIV .container到.container流体

我卡住了。我想知道在我的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我已经把所有我的内容都包装在应用程序html中，并按照Michael Hartl的教程将其包装在一个div容器中。我删除了那个div并解决了问题。

enter image description here

来源

2014-11-05 Kelly

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

来源

2014-11-05 02:55:44

我正是尝试这个代码，它仍然没有工作。我认为这是我配置我的Rails应用程序的方式，而我做的一些工作没有奏效，我最好的猜测是错误出现在js应用程序文件中，但我不确定。我张贴了我放在那个文件中的内容。谢谢您的帮助。 – Kelly 2014-11-05 16:24:02

你可以在浏览器中渲染页面并复制/粘贴输出的HTML吗？我的猜测是你的布局里有一个额外的'.container'包装器。 – 2014-11-05 16:26:07

谢谢，我认为你是对的。我刚刚从HTML输出中粘贴了一个ss。我在文本编辑器中看不到额外的'.container'。我如何删除它？谢谢你的帮助！ – Kelly 2014-11-05 17:31:44

Rails Bootstrap Full Width Jumbotron

回答

相关问题