个人中心
gpt4 book ai didi

css - 如何使标题与 Bootstrap 列对齐？

转载 作者：太空宇宙 更新时间：2023-11-04 12:08:57 25 4
gpt4 key购买 nike

我们怎样才能使 layouts/header 与 col-md-9 & col-md-3 对齐，这样“Personal Control Center 中的 P"与其下方的面板完美对齐，向下箭头与侧边栏的右边缘完美对齐？

我能够通过第一张图片中的填充来做到这一点，但我希望无论屏幕尺寸如何，它都能完美对齐。如您所见，随着我减小浏览器的宽度，它变得不那么对齐。

enter image description here 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;
  }
}

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

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

我明白了:

enter image description here

感谢您的宝贵时间!

最佳答案

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

<%= 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 宽度并为您的 header 包装器和 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

关于css - 如何使标题与 Bootstrap 列对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29177228/

25 4 0
文章推荐： java - 迁移到 jersey 2.x，现在我收到 servlet 容器异常
文章推荐： c++ - 从 .txt 文件中提取行，然后将单词存储到单独的数组中 | C++
文章推荐： linux - 如何充当系统日志接收器？
文章推荐： java - 在 XML 中的 ListView 上方添加 header
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com