使用 Bootstrap-SASS Rails 的简单两列布局答案

【问题标题】：Simple Two-Column Layout with Bootstrap-SASS Rails使用 Bootstrap-SASS Rails 的简单两列布局
【发布时间】：2015-01-05 18:50:48
【问题描述】：

我想要一个简单的两列布局。使用下面的代码，这些列不是并排的，而是遵循 html 默认的块级流。我想知道我是否缺少将 bootstrap-sass 安装到 rails 应用程序的一些步骤。

Gemfile 中的相关宝石：

gem 'sass-rails'
gem 'bootstrap-sass', '~> 3.3.1.0'
gem 'autoprefixer-rails'
gem 'simple_form'

app/assets/stylesheets/application.css.scss

/*
 *= require_tree .
 *= require_self
 */

@import "bootstrap-sprockets";
@import "bootstrap";

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

app/views/layouts/application.html.erb

<body>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span8">
                <%= yield %>
            </div>
            <div class="span4">
                <h2> Should be the sideBar</h2>
                <p> 
                    Contain within the second column.
                </p>
            </div>
        </div>
    </div>
</body>

【问题讨论】：

Bootstrap 3 对网格使用不同的类。

标签： ruby-on-rails twitter-bootstrap bootstrap-sass

【解决方案1】：

正如克里斯蒂娜上面提到的，Bootstrap 3 对网格有不同的类名，所以类名“span8”和“span4”不适用于 Bootstrap 3。克里斯蒂娜也提到，“row-fluid”类需要只是“行”。这是一个快速修复：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-8">
            <%= yield %>
        </div>
        <div class="col-xs-4">
            <h2> This is the sidebar</h2>
            <p> 
                This is inside the sidebar.
            </p>
        </div>
    </div>
</div>

【讨论】：

row-fluid 类不存在是 Bootstrap 3，它只是 .row