Question

我尝试为Ruby on Rails应用程序自定义导航栏，但是，它的左侧和右侧没有跟随颜色，因此它看起来像下面的图像。

注意左侧和右侧的空白区域。我通过更改.container中的style.css背景颜色来改变颜色。

/*********
Navbar Styles
**********/

.navbar-static-top .container {
  background-color: #3f51b5;
}

虽然双方都没有改变。

选择我的导航栏并查看.container div覆盖的内容，看起来它应该是整个导航栏，如下图所示。

所以，我认为我正在改变正确元素的背景。我读了一些bootstraps添加的内容unecessary padding to the right and left.所以我尝试在我的style.css文件中实现这些覆盖，但它也没有用。

所以我在迷失方向，我的猜测是Rails或Bootstraps，或者某种方式用于用户身份验证的Devise宝石，当我不这样做的时候会产生这种奇怪的填充物＃＆＃ 39;我想要它。虽然我不知道。我在开始时使用了一些类似的模板HTML / CSS文件，但我删除了所有这些文件。我的Assets文件夹中唯一的样式表是我的，application.scss和users.scss，但users.scss中没有任何内容。

提前感谢任何帮助。

的style.css

/*********
Navbar Styles
**********/

.navbar-static-top .container {
  background-color: #3f51b5;
  padding-right: 0; /*15px in bootstrap.css*/
  padding-left: 0;  /*idem*/
  margin-right: auto;
  margin-left: auto;
  border-color: #3f51b5;
}

/**********
Devise Alert styles
***********/
.alert-box {
  color:#555;
  border-radius:10px;
  font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
  padding:10px 10px 10px 36px;
  margin:10px;
  span {
    font-weight:bold;
    text-transform:uppercase;
  }
}
.danger {
    background:#ffecec url('images/error.png') no-repeat 10px 50%;
    border:1px solid #f5aca6;
}
.success {
    background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;
    border:1px solid #a6ca8a;
}
.warning {
    background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;
    border:1px solid #f2c779;
}
.notice {
    background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
    border:1px solid #8ed9f6;
}

application.html.erb

<!DOCTYPE html>
<html>
<head>
    <title>Shiplist</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
</head>
<nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">
                <%= link_to 'SHIP LIST', root_path, class: "navbar-brand"%>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <% if user_signed_in?%>
                <li><%= link_to 'post ad', new_listing_path %></li>
                <li><%= link_to 'log out', destroy_user_session_path, :method => :delete %></li>
                <% else %>
                <li><%= link_to 'sign up', new_user_registration_path %></li>
                <li><%= link_to 'log in', new_user_session_path %></li>
                <% end %>
            </ul>
        </div>
</nav>
<body>
<%= render 'layouts/messages' %>
<%= yield %>

</body>
</html>

Answer 1

尝试覆盖自己的style.css上的navbar-default。

.navbar-default{
  background-color: /*your color here*/  !important;
}

或者如果您想摆脱不必要的空格，请移除class="container"，然后将padding: 0 1% /*example*/添加到.navbar-default。

使用bootstraps创建的Navbar在左右

1 个答案: