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

Question

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

Gemfile 中的相关 Gem：

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>

Answer 1

正如上面 Christina 提到的，Bootstrap 3 有不同的 class 网格名称，因此 class 名称 "span8" 和 "span4" 将不起作用使用 Bootstrap 3. Christina 还提到，class "row-fluid" 需要只是 "row." 这是一个快速修复：

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

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

Simple Two-Column Layout with Bootstrap-SASS Rails

ruby-on-rails

twitter-bootstrap

bootstrap-sass