web-dev-qa-db-ja.com

Bootstrap 3-アイテムはナビゲーションで右に浮きます

これは私の現在のナビゲーションです：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">ApplicationName</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" id="main-navigation">
                <li><a href="#">Item1</a></li>
                <li><a href="#">Item2</a></li>
            </ul>
        </div>
    </div>
</nav>

このナビゲーションで私はこれを持っています： enter image description here

私が実際に欲しいのはこれです： enter image description here

アンカータグをフローティングにしてみましたが、liタグのすぐ内側にフローティングしています。 ExtJSには、この動作を提供する「->」項目があります。これどうやってするの？

私はBootstrap 3.1.1を使用しています。

ありがとうございました。 :)

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3
9
NullCod3

pull-rightクラスをulタグに

完全な例：

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">ApplicationName</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" id="main-navigation">
                <li><a href="#">Item1</a></li>
            </ul>
            <ul class="nav navbar-nav pull-right" id="main-navigation">
                <li><a href="#" class="pull-right">Item2</a></li>
            </ul>
        </div>
    </div>
</nav>

結果： works!

27
Curtis W

要素にこれを与える必要があります：

CSS

li.right {
    position: absolute;
    right: 0;
}

HTML

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">ApplicationName</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav" id="main-navigation">
            <li><a href="#">Item1</a></li>
            <li class="right"><a href="#">Item2</a></li>
        </ul>
    </div>
</div>

実施例

2
Sebsemillia

新しいブートストラップ以降、pull-rightは使用しません

V3.1.0以降、ドロップダウンメニューでの.pull-rightは廃止されました。メニューを右揃えするには、.dropdown-menu-rightを使用します。ナビゲーションバーの右揃えのナビゲーションコンポーネントは、このクラスのミックスインバージョンを使用して、メニューを自動的に配置します。これを上書きするには、.dropdown-menu-left.を使用します

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
 ...
</ul>

hamlを使用する場合

  %ul.nav.navbar-nav.navbar-right/
      %li
          %a{:href => "http://yoursitelogo.co/"}
             %img{:alt => "Some site", :height => "50", :src => "/assets/image.png"}
1
wildrails