使用引导程序创建的导航栏左右有空白答案

【问题标题】：Navbar created with bootstraps has white space on left and right使用引导程序创建的导航栏左右有空白
【发布时间】：2016-12-02 00:50:01
【问题描述】：

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

注意左右两边的空格。我通过更改style.css 中的.container 背景颜色来更改颜色的最里面部分。

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

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

虽然双方没有改变。

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

所以，我认为我正在更改正确元素的背景。我读到了一些引导程序如何添加 unecessary padding to the right and left. 的内容，所以我尝试在我的 style.css 文件中实现这些覆盖，但它也不起作用。

所以我对正在发生的事情感到迷茫，我的猜测是在某个地方 Rails 或 Bootstraps 或者可能是用于用户身份验证的 Devise gem，当我不想要它时，它会在侧面生成这种奇怪的填充。虽然我不知道。我在开始时使用了一些类似的模板 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>

【问题讨论】：

你应该把背景颜色放在navbar类而不是容器中，你有navbar-default类背景#f8f8f8尝试覆盖它或在导航栏中添加新类。
在那里添加另一个类有效，谢谢。我确实尝试过实际更改导航栏默认颜色，但没有奏效。不知道为什么会这样，但谢谢！
请添加minimal reproducible example
您可以将您的解决方案作为答案发布并稍后接受，除非在此期间有更好的答案。

标签： html css ruby-on-rails twitter-bootstrap

【解决方案1】：

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

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

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

【讨论】：

这也很好，有点像这样更好，而不是像 cmets 中讨论的那样添加另一个类。谢谢。