具有Bootstrap-SASS导轨的简单两列布局

Question

I want a simple two-column layout. 我想要一个简单的两列布局。 With the code below, the columns are not side by side but instead are following the html default block-level flow. 使用下面的代码，这些列不是并排的，而是遵循html默认的块级流程。 I am wondering if I am missing some step with installing bootstrap-sass into the rails app. 我想知道我是否缺少将bootstrap-sass安装到rails应用程序中的步骤。

Relevant Gems in Gemfile: Gemfile中的相关宝石：

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

app/assets/stylesheets/application.css.scss app / assets / stylesheets / application.css.scss

/*
 *= require_tree .
 *= require_self
 */

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

app/assets/javascripts/application.js app / assets / javascripts / application.js

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

app/views/layouts/application.html.erb 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

As mentioned by Christina above, Bootstrap 3 has different class names for the grid, so class names "span8" and "span4" will not work with Bootstrap 3. Also mentioned by Christina, the class "row-fluid" needs to be just "row." 如上述克里斯蒂娜（Christina）所述，Bootstrap 3在网格上具有不同的类名称，因此类名称“ span8”和“ span4”将不适用于Bootstrap3。另外，克里斯蒂娜（Christina）提到，类“行流体”只需要“行。” Here is a quick fix: 快速解决方法：

<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导轨的简单两列布局

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-01-05 19:15:19

具有Bootstrap-SASS导轨的简单两列布局

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-01-05 19:15:19

解决方案1
0 已采纳 2015-01-05 19:15:19