我正在尝试为 Ruby on Rails 应用程序自定义我的导航栏，但是，它的左侧和右侧没有遵循颜色，所以它看起来像下图。
注意左右两边的空白。通过更改 style.css 中的 .container 背景颜色，我得到了最里面的部分来改变颜色。
/*********
Navbar Styles
**********/
.navbar-static-top .container {
background-color: #3f51b5;
}
虽然侧面没有改变。
选择我的导航栏并查看 .container div 覆盖的内容，看起来应该是整个导航栏，如下图所示。
所以，我认为我正在更改正确元素的背景。我读了一些关于 bootstraps 如何添加 unecessary padding to the right and left. 的内容所以我尝试在我的 style.css 文件中实现这些覆盖，但它也没有用。
所以我对发生的事情一头雾水，我猜是 Rails 或 Bootstraps 或用于用户身份验证的 Devise gem 以某种方式在我不想要的时候在两侧生成了这种奇怪的填充。虽然我不知道。一开始我使用了一些类似的模板 HTML/CSS 文件，但我删除了所有这些文件。我的 Assets 文件夹中仅有的样式表是我的、application.scss 和 users.scss，但 users.scss 中什么也没有。
如有任何帮助，我们将不胜感激。
样式.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;
}
应用程序.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>
最佳答案
尝试在您自己的 style.css 上覆盖 navbar-default。
.navbar-default{
background-color: /*your color here*/ !important;
}或者如果你想去掉不必要的空格，删除 class="container" 然后添加 padding: 0 1%/*example*/ 到.navbar-default.
关于html - 使用 bootstraps 创建的 Navbar 左右都有空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40922981/