Question

我们如何使layouts/header与col-md-9＆amp; col-md-3以便＆＃34; P＆＃34;在个人控制中心与下方的面板完美对齐，向下的箭头与侧边栏的右边缘完美对齐？

我能够通过第一张照片中的填充来实现，但我希望无论屏幕大小如何都能完美对齐。正如您所看到的那样，当我减小浏览器的宽度时，它变得不那么对齐。

enter image description here

*在最后一种情况下，向下箭头应与面板的右边缘对齐。

enter image description here

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="container">
      <div class="col-md-9">
        <%= yield %>
      </div>
      <div class="col-md-3">
        <% if current_user.present? %>
        <%= render 'layouts/sidebar' %>
        <% end %>
      </div>
    </div>
  </div>
</body>
</html>

bootstrap_customization.css.scss

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

$body-bg:                         #2c3e50;
$font-family-sans-serif:          'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$navbar-height:                   45px;
$navbar-default-bg:               white;
$navbar-default-brand-color:      #A73A31;
$brand-primary:                   #000;
$jumbotron-bg:                    #FFFFFF;

@import 'bootstrap-sprockets';
@import 'bootstrap';

/* link */
.navbar-default .navbar-nav > li > a {
    color: #2E2E2E;
}

.panel-default > .panel-heading {
  background-color: #2E2E2E;
  color: white;
  border: none;
}

.panel {
  border: none;
}

#sidebarheadingtop {
  padding-top: .1em;
  border: none;
  border-radius: 0px;
  background-color: #2E2E2E;
  color: #ecf0f1;
  padding-bottom: 3px;
}

#sidebarheading {
  padding-top: .1em;
  border-radius: 0px;
  border: none;
  background-color: #2E2E2E;
  color: #ecf0f1;
  padding-bottom: 3px;
}

#sidebarsectiontop {
  margin-top: 0px;
  margin-bottom: 0px;
  border-bottom-right-radius: 0em 0em;
  border-bottom-left-radius: 0em 0em;
  border-style: none;
}

#sidebarsection {
  margin-top: 0px;
  margin-bottom: 0px;
  border-radius: 0px;
  border-style: none;
}

#sidebarsectionbottom {
  margin-top: 0px;
  margin-bottom: 0px;
  border-top-radius: 0px;
  border-style: none;
}

.nav-container {
  margin: 0 auto;
  padding-left: 8em;
  padding-right: 8em;
}

.container {
  margin: 0 auto;
  padding-left: 3em;
  padding-right: 3em;
}

.center {
     text-align: center;
}

.navbar-brand {
     font-weight: bold;
}

a {
  &:hover {
    color: #666;
    text-decoration: none;
  }
}

如果我将应用程序代码更改为：

＆＃13;

    <div class="container-fluid">
        <div class="container">
            <%= render 'layouts/header' %>
                <% flash.each do |name, msg| %>
                <%= content_tag(:div, msg, class: "alert alert-info") %>
            <% end %>
        <!-- Rest of the code here -->
        </div>
    </div>

＆＃13;

我明白了：

enter image description here

感谢您的时间！

Answer 1

盲目猜测，我认为包装这个：

<%= render 'layouts/header' %>
    <% flash.each do |name, msg| %>
    <%= content_tag(:div, msg, class: "alert alert-info") %>
<% end %>

你的.container内部会像这样做：

<div class="container-fluid">
    <div class="container">
        <%= render 'layouts/header' %>
            <% flash.each do |name, msg| %>
            <%= content_tag(:div, msg, class: "alert alert-info") %>
        <% end %>
    <!-- Rest of the code here -->
    </div>
</div>

====更新====

查找.container宽度并为标题包装器和margin: 0 auto;指定相同的宽度。你的标题必须已经有一个包装，但我要在这里创建一个供你理解：

<body>
    <div class="headerWrapper">
        <%= render 'layouts/header' %>
            <% flash.each do |name, msg| %>
            <%= content_tag(:div, msg, class: "alert alert-info") %>
        <% end %>
    </div>
    <div class="container-fluid">
        <div class="container">
            <div class="col-md-9">
            <%= yield %>
        </div>
    <div class="col-md-3">
        <% if current_user.present? %>
        <%= render 'layouts/sidebar' %>
        <% end %>
    </div>
    </div>
  </div>
</body>

这是你的CSS文件：

.headerWrapper {
    width: 1200px; /* this is just a width size example, the value that goes here is the same of your body width */
    margin: 0 auto;
}

这是online example

如何使标题与引导列对齐？

1 个答案: