2

デフォルトでは、モバイル コンテナーのドロップダウンのリンクは左側にあります (以下に示すように)。

ここに画像の説明を入力

左ではなく右に表示させる方法はありますか?使用してみtext-align:right;ましたが、きれいに表示されません:

ここに画像の説明を入力

4

2 に答える 2

1

たとえば、独自のクラスを作成し、それをコンテナに.align-right追加して、リンクを右に揃えることができます。.nav-collapseこのように、変更がブートストラップスタイルシートのそのクラスに依存する他の要素に影響を与えることはありません。これを試して:

.nav-collapse.align-right {
    text-align:right;
}

次に、これを行うことができます:

<div class="nav-collapse align-right"> ..links.. </div>

そして、あなたのリンクは代わりに右側に配置されます。

デモ: http: //jsfiddle.net/PWFSX/

于 2012-06-10T11:46:48.813 に答える
0

ブートストラップのドキュメントから: 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>
于 2014-03-09T19:58:19.137 に答える