为什么侧边栏显示在页面底部？

Question

如何使用 Twitter bootstrap 使侧边栏显示在页面的右侧。 header 位置正确。

除了我的无能，你觉得还有什么问题？

感谢您的帮助！

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Personal Control Center</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- Tells app to be mobile responsive -->
</head>
<body>
  <%= render 'layouts/header' %>
    <% flash.each do |name, msg| %>
      <%= content_tag(:div, msg, class: "alert alert-info") %>
    <% end %>
    <div class="container-fluid">
      <div class="col-xs-12 .col-md-8">
        <%= yield %>
      </div>
      <div class="col-xs-6 .col-md-4">
        <h2>About Us</h2><p>This app is for tracking and sharing habits, goals, values, and progress.</p>
      </div>
    </div>
    </div>
</body>
</html>

Github: https://github.com/RallyWithGalli/ruletoday

Answer 1

Bootstrap 使用 12 列网格。如果您用其他资源占用了所有 12 列，那么它将不会显示 space。如果你想使用侧边栏，将你的其他资源放在它们自己的可能是 9-col-md 的列中，你可以将侧边栏放在 3-col-md 中。像这样：

<!DOCTYPE html>
<html>
<head>
  <title>Personal Control Center</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">        <!-- Tells app to be mobile responsive -->
</head>
<body>
  <div class="container col-md-3>
  <%= render 'layouts/header' %>
  </div>
    <% flash.each do |name, msg| %>
      <%= content_tag(:div, msg, class: "alert alert-info") %>
    <% end %>
    <div class="container col-md-9">
      <div class="col-xs-12 .col-md-8">
        <%= yield %>
      </div>
      <div class="col-xs-6 .col-md-4">
        <h2>About Us</h2><p>This app is for tracking and sharing habits, goals, values, and progress.</p>
      </div>
    </div>
    </div>
</body>
</html>

如果您从此示例中看到，您只是将其他列放在另一列中。那应该工作。（未经测试）了解更多信息，请查看他们的指南 - http://getbootstrap.com/css/#grid

为什么侧边栏显示在页面底部？

Why is Sidebar Showing at Bottom of Pages?

css

layout

ruby-on-rails

sidebar

twitter-bootstrap