使用bootstraps創建的導航欄在左側和右側有空白區域

我正在嘗試爲Ruby on Rails應用程序定製我的導航欄，但是，它的左側和右側並未跟隨顏色，因此它看起來像下面的圖像。使用bootstraps創建的導航欄在左側和右側有空白區域

通知白色空間的左側和右側。通過更改style.css中的.container背景色，我得到了最內部的部分來更改顏色。

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

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

儘管雙方沒有改變。

選擇我的導航欄，看看div覆蓋的是什麼，它看起來應該是整個導航欄，如下圖所示。

所以，我覺得我改變的是正確元素的背景。我讀了一些bootstraps增加的內容unecessary padding to the right and left.所以我嘗試在我的style.css文件中實現這些覆蓋，但它也不起作用。

所以我在迷路上發生了什麼事情，我的猜測是某處Rails或Bootstraps或者用戶身份驗證的Devise gem在某種程度上會在我不想要的時候在側面生成這個奇怪的填充。雖然我不知道。我在開始時使用了一些像模板HTML/CSS文件，但是我刪除了所有這些文件。我的資源文件夾中唯一的樣式表是mine，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>

來源

2016-12-02 Carson

你應該把背景顏色放在'navbar'類而不是容器中，你有'navbar-default'類和背景'＃f8f8f8'試圖覆蓋那個或者在navbar裏面添加新的類。 –

在那裏添加另一個班級，謝謝。我確實嘗試更改navbar默認顏色，但它不起作用。不知道爲什麼這有效，但謝謝！ – Carson

請添加[mcve] –

自己嘗試一下的style.css覆蓋navbar-default。

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

，或者如果你想擺脫不必要的空格，去掉class="container"再加入padding: 0 1% /*example*/到.navbar-default。

來源

2016-12-02 01:12:36 kcNeko

工作得很好，有點像更好，而不是像評論中提到的那樣添加另一個班級。謝謝。 – Carson

使用bootstraps創建的導航欄在左側和右側有空白區域

回答

相關問題