Question

如何使用twitter bootstrap让侧边栏显示在页面右侧。标题放置正确。

除了我的无能之外，你认为问题是什么？

感谢您的帮助！

application.html.erb

＆＃13;

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

＆＃13;

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

Answer 1

Bootstrap使用12列网格。如果您使用其他资源占用所有12列，则它将无法显示空间。如果你想使用侧边栏将你的其他资源放在他们自己的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

为什么补充工具栏显示在页面底部？

1 个答案: