デフォルトでは、モバイル コンテナーのドロップダウンのリンクは左側にあります (以下に示すように)。
左ではなく右に表示させる方法はありますか?使用してみtext-align:right;
ましたが、きれいに表示されません:
デフォルトでは、モバイル コンテナーのドロップダウンのリンクは左側にあります (以下に示すように)。
左ではなく右に表示させる方法はありますか?使用してみtext-align:right;
ましたが、きれいに表示されません:
たとえば、独自のクラスを作成し、それをコンテナに.align-right
追加して、リンクを右に揃えることができます。.nav-collapse
このように、変更がブートストラップスタイルシートのそのクラスに依存する他の要素に影響を与えることはありません。これを試して:
.nav-collapse.align-right {
text-align:right;
}
次に、これを行うことができます:
<div class="nav-collapse align-right"> ..links.. </div>
そして、あなたのリンクは代わりに右側に配置されます。
デモ: http: //jsfiddle.net/PWFSX/
ブートストラップのドキュメントから: http://getbootstrap.com/components/#navbar
これらのクラス「navbar-form navbar-left」を使用する必要があります
私はそれらを次のように使用しました:
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data- toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="span10"></span>
</button>
<%= link_to 'Home', root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<%= render 'layouts/navigation_links' %>
</ul>
<ul class='nav navbar-nav navbar-right'>
<% if user_signed_in? %>
<li><%= link_to 'Sign out', destroy_user_session_path, :method => :delete %></li>
<% else %>
<li><%= link_to 'Sing in', new_user_session_path %> </li>
<% end %>
</ul>
</div>
</div>