1
Ruby on Railsアプリケーション用にNavbarをカスタマイズしようとしていますが、その左右の色が次のようになっています。ブートストラップで作成されたNavbarは、左右に空白が付きます
お知らせ左右に空白。私はstyle.cssに.containerの背景色を変えることで色を変えるために最も内側の部分を得ました。
/*********
Navbar Styles
**********/
.navbar-static-top .container {
background-color: #3f51b5;
}
サイドは変更されませんが、
私のnavbarを選択し、.container divが何をカバーしているのかを見ると、以下の図のようにNavbar全体になるはずです。
だから、私は私が正しい要素の背景を変更していと思うだろう。私はブートストラップがどのようにしてunecessary padding to the right and left.を追加するのかをいくつか読んだので、私はstyle.cssファイルでそれらのオーバーライドを実装しようとしましたが、それもうまくいきませんでした。
私は何が起こっているのか分からず、私の推測はどこかのRailsやBootstraps、あるいはユーザー認証のためのDevise宝石だと思っています。私は知らないけれど。私はいくつかのテンプレート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>
コンテナの代わりに 'navbar'クラスに背景色を置く必要があります。'＃f8f8f8'という背景を持つ 'navbar-default'クラスがあります。上書きするか、navbarの中に新しいクラスを追加してみてください。 –
そこに別のクラスを追加すると、ありがとうございます。私は実際にnavbar-defaultカラーを変更しようとしましたが、うまくいきませんでした。それがなぜ機能するのか分かりませんが、ありがとう！ – Carson
[mcve]を追加してください。 –