引导网格系统没有预期的效果答案

【问题标题】：Bootstrap Grid System Not Having Desired Effect引导网格系统没有预期的效果
【发布时间】：2014-07-03 00:13:58
【问题描述】：

我最近开始在一个旧的 Rails 项目上使用 Bootstrap。我正在使用网格系统来对齐主要内容和侧边栏。下面是我的“视图”文件夹中文件 (index.html.erb) 中的代码 sn-p。

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8"> 
              <div id="featured_gallery" class="wide_content_box rounded_border">
                <%= content_tag :div do %>
                <%= content_tag :span, :class => "results_head" do %>
                <%= _('Featured gallery') %>: <%= link_to(truncate(h(@featured_gallery.name), :length => 30), @featured_gallery) %>
                <% end -%>
                &nbsp;&nbsp;&nbsp;&nbsp;<%= more_link(galleries_path(:filter => 'featured')) %>
                <% end %>
                <%= render :partial => "projects/project", :collection => @featured_gallery_projects %>
                <div class="clear">
                    &nbsp;
                </div>
            </div>
        </div>

    <div class="col-md-4">
                <div id="greeting">
                    <div id="hi">
                        <%= user_thumbnail(current_user, :thumb_tiny) %><%= random_hi %>
                    </div>
                    <div class="clear">
                        &nbsp;
                    </div>
                </div>
            <div class="clear">
                &nbsp;
            </div>
    </div>
  </div>
 </div>

这不是将两个部分并排对齐，而是具有以下效果。我无法理解为什么，并且希望有任何见解可以使其正确对齐。 who's online、featured 和其他部分应该在主要内容右侧的列中彼此重叠显示。

编辑：我的 div 嵌套正确。只是为了测试，我使用以下代码在原始代码上方创建了另一行：

<div class="row">
        <div class="col-xs-4">
            First column!
        </div>
        <div class="col-xs-4">
            "Second column"
        </div>
        <div class="col-xs-4">
            Third column!
        </div>
    </div>

这也会导致 3 个 cmets 相互堆叠（而不是同一行中的 3 个不同列），这与预期相去甚远。这非常奇怪，因为据我所知，我是按照网格系统实现的说明进行的。想法？

注意：我的代码在 Bootply 上具有预期的效果，但不适用于我正在处理的 Web 项目。

PS：我通过 gem 安装了 bootstrap，它在我的样式表中添加了 bootstrap_and_overrides.css.less。但是，我的 application.css 没有提到引导程序（它不需要任何引导程序 css 文件。我没有更改它，因为安装 gem 应该完全解决这个问题。我错过了什么吗？是 application.css应该需要 bootstrap 才能使与 bootstrap 相关的任何东西都可以工作？

【问题讨论】：

col-md-4 div 不在行 div 内。
我调整了它，正确缩进所有内容并确保 div 正确嵌套。它仍然无法按预期工作。
@user3694391 您使用的是哪个 gem？如果您使用的是bootstrap-saas，那么它需要您在 application.css.scss 中导入 bootstrap
你能在bootply.com 上举个例子来说明这个问题吗？
我正在使用 gem 'twitter-bootstrap-rails'。

标签： html css ruby-on-rails twitter-bootstrap gem

【解决方案1】：

确保 div 正确嵌套

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8"> 
      ...
    </div>
    <div class="col-md-4"> 
      ...
    </div>
  </div>
</div>

更多信息：http://getbootstrap.com/css/#grid

【讨论】：

【解决方案2】：

我意识到我的项目最初使用的是 SASS，而不是 twitter-bootstrap-gem 所需的 LESS。我现在已经切换到使用 bootstrap sass gem，它现在可以正常工作了。

【讨论】：