2

私は次のコードを持っています（ページの完全なソース）：

<div class="navbar">
<div class="navbar-inner">
<div class="container">

  <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>

  <!-- Be sure to leave the brand out there if you want it shown -->
  <span class="brand" href="#">Test</span>


  <!-- Everything you want hidden at 940px or less, place within here -->
  <div class="nav-collapse collapse">
   <ul class="nav">
     <li class="{% active request "^/$" %}"><a href="#">Home</a></li>
     <li class="{% active request "^/about$" %}"><a href="#">About</a></li>
   </ul>


    <form class="navbar-search pull-right">
      <input type="text" class="search-query" placeholder="Search...">
    </form>
    <div class="navbar-form pull-right">
     <a href="{% url "login" %}" class="btn">Log in</a>
     <a href="#" class="btn btn-primary">Sign up</a>
    </div>
  </div>
  </div>

    <!-- .nav, .navbar-search, .navbar-form, etc -->
  </div>
</div>

デスクトップとしてロードすると、次のように表示されます デスクトップとしてロード 。[ログイン]ボタンと[サインアップ]ボタンが検索バーの前にあることに注意してください。

ただし、ブラウザのサイズを変更し、ナビゲーションバーが応答すると、次のようになります。 モバイル版

これで、「ログイン」ボタンと「サインアップ」ボタンが検索バーの後に表示されます。これは、それらがプルライト要素であるためです。

ボタンと検索バーをfloat: right親divでラップしてみました。これにより、それらは正しい順序にとどまりますが、奇妙なことに横にずれてしまいます。これは望ましくありません。順序が逆にならないようにする解決策はありますか？

4

2 に答える 2

2

問題は、ロジックが開始されると、floatがオンにnavbar-formなりnavbar-search、noneに設定されることnav-collapseです。floatに依存する代わりに、を試してみてdisplay: inline-blockください。以下は合理的に機能するようです（スタイルをインラインで適用するのではなく、独自のクラスを作成する必要があります）。

    <div class="pull-right">
    <!-- .btn's already have display: inline-block so don't need to apply it manually -->
    <!-- margin-left: 15px is applied so that the buttons align with the 
        search field -->
        <a style="margin-left: 15px;" href="#" class="btn">Log in</a>
        <a href="#" class="btn btn-primary">Sign up</a>
        <form class="navbar-form" style="display:inline-block">
            <input type="text" class="search-query" placeholder="Search...">
        </form>     
    </div>
于 2013-03-14T06:58:39.620 に答える
2

Navbarは.pull-leftまたは.pull-rightを使用しなくなり、.navbar-leftおよび.navbar-rightを使用します。これにより、クラスの連鎖による特異性の問題が回避され、スタイリングが容易になります。

http://blog.getbootstrap.com/2013/08/13/bootstrap-3-rc2/を参照してください

于 2013-09-25T15:41:25.987 に答える