Ruby On RailsとBootstrapの左側にロゴが表示されているNavbar

ナビゲーションバーにロゴを挿入する必要がありますが、ナビバはそれを下ろします。これを避けるために、どのように私のロゴをnavbarに収めることができますか？Ruby On RailsとBootstrapの左側にロゴが表示されているNavbar

<body> 
<header class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="container"> 
    <%= link_to image_tag("image.png", alt: "logo"), 
     '/' %> 
    <%= link_to "...", '#', id: "prov" %> 
    <nav> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><%= link_to "example1", '#' %></li> 
     <li><%= link_to "example2", '#' %></li> 
     </ul> 
    </nav> 
    </div> 
</header> 
<div class="container"> 
    <%= yield %> 
</div>

出典

2016-05-03 Showtime

のようになります。

<body> 
<header class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="container"> 
    <%= link_to image_tag("image.png", alt: "logo"), '/', class: 'navbar-brand' %> 
    <%= link_to "...", '#', id: "prov", class: 'navbar-brand' %>

出典

2016-05-03 18:30:12 Uzbekjon

NAVは、それがため、デフォルトでフル幅をとるロゴの下に落下意味ブロックレベル要素です：

は、ここでは、コードです。ロゴを左に、ロケートを横に並べたい場合は、ロゴをdivにラップし、クラスにcol-sm-2を付け、クラスをcol-sm-10にすることができます。だから、あなたはあなたのリンクにnavbar-brandクラスを追加する必要があり、この

<body> 
 
<header class="navbar navbar-fixed-top navbar-inverse"> 
 
    <div class="container"> 
 
    <div class="col-sm-2"> 
 
     <%= link_to image_tag("image.png", alt: "logo"), 
 
     '/' %> 
 
     <%= link_to "...", '#', id: "prov" %> 
 
    </div> 
 
    <nav class="col-sm-10"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><%= link_to "example1", '#' %></li> 
 
     <li><%= link_to "example2", '#' %></li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 
<div class="container"> 
 
    <%= yield %> 
 
</div>

See this reference on how bootstrap grid classes works

出典

2016-05-03 18:29:58 NiBi

あなたは、たとえばsize.for

.navbar-brand { 
    padding: 0px; 
} 
.navbar-brand>img { 
    height: 100%; 
    padding: 15px; 
    width: auto; 
}

をナビゲーションバーやロゴのためのCSSを書くことができます

出典

2016-05-04 04:53:38

Ruby On RailsとBootstrapの左側にロゴが表示されているNavbar

答えて

関連する問題