Question

我最近开始在旧的Rails项目中使用Bootstrap。我使用网格系统来对齐主要内容和侧边栏。以下是我在＆＃34;视图＆＃34;中的文件（index.html.erb）的代码段。文件夹中。

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

不是将两个部分并排对齐，而是具有以下效果。我无法理解为什么，并希望有任何见解让它正确对齐。谁的在线，精选和其他部分应该在主要内容右侧的列中显示在彼此之上。

enter image description here

编辑：我的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个注释堆叠在彼此之上（而不是同一行中的3个不同列），这远非预期。这是非常奇怪的，因为据我所知，我遵循网格系统实现的指示。想法？

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

PS：我通过gem安装了bootstrap，它将bootstrap_and_overrides.css.less添加到我的样式表中。但是，我的application.css没有提到bootstrap（它没有＆＃39;要求＆＃39;任何bootstrap css文件。我没有改变它，因为安装gem应该完全照顾它。我错过了什么？application.css是否应该要求bootstrap与bootstrap相关的任何东西工作？

Answer 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

Answer 2

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

Bootstrap网格系统没有所需的效果

2 个答案: