0

レスポンシブ Twitter ブートストラップ ナビでこれが発生する理由がわかりません。スクリーンショットは次のとおりです。

https://www.evernote.com/shard/s3/sh/79b436f8-822c-4fdc-ad36-a1d706686d05/3a735fc948474e109c08b773f01f0cf8

上向きの奇妙な矢印を追加しています。キャレットは意図されたものであり、問​​題ありません。dropdownからすべてのクラスを削除すると消え<li class="dropdown">ます。しかし、そうするとナビが壊れます。それ以外の場合、ナビはうまく機能しています。ここに私のマークアップがあります:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <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>
      <%= link_to "Tip Share", root_path, :class => "brand" %>

      <div class="nav-collapse">

                <ul class="nav pull-left">
                    <% if current_user %>
                        <li class="dropdown">
                          <a href="#"class="dropdown-toggle" data-toggle="dropdown">
                            Sales
                                <span class="caret"></span>
                          </a>
                          <ul class="dropdown-menu">
                                <li><%= link_to "New Sales", new_sale_path  %></li>
                                <li><%= link_to "Manage Sales", sales_path  %></li>
                          </ul>
                        </li>

                        <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Shifts
                                <span class="caret"></span>
                          </a>
                          <ul class="dropdown-menu">
                                <li><%= link_to "New Shift", new_shift_path %></li>
                                <li><%= link_to "Manage Shifts", shifts_path %></li>
                          </ul>
                        </li>

                        <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Employees
                                <span class="caret"></span>
                          </a>
                          <ul class="dropdown-menu">
                                <li><%= link_to "New Employee", new_employee_path %></li>
                                <li><%= link_to "Manage Employees", employees_path %></li>
                          </ul>
                        </li>

                        <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            Positions
                                <span class="caret"></span>
                          </a>
                          <ul class="dropdown-menu">
                                <li><%= link_to "New Position", new_position_path %></li>
                                <li><%= link_to "Manage Positions", positions_path %></li>
                          </ul>
                        </li>
                    <% end %>
                </ul>

                <ul class="nav pull-right">
                    <% if current_user %>
                        <li>
                        <%= link_to root_path do %>
                        <%= current_user.email %>
                    <% end %>
                    </li>
                    <li><%= link_to 'Log out', logout_path %></li>
                    <% else %>
                    <li><%= link_to 'Sign up', signup_path %></li>
                    <li><%= link_to 'Log in', login_path  %></li>
                  <% end %>
                </ul>
      </div>
    </div>
  </div>
</div>

このマークアップには何の問題もないように見えますが、これらの小さな矢印が表示され続けます。css でオーバーライドしようとするよりも、ブートストラップで何が間違っているのかを理解したいと思います

これらの矢印を取り除くにはどうすればよいですか?

参考までに、bootstrap-sass gem を使用して Twitter ブートストラップをインポートしています。

4

2 に答える 2

2

.navbar-inner を追加すると、機能するのに十分な特異性が得られます。

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    .navbar .navbar-inner .nav > li > .dropdown-menu:after {
      display: none;
    }
}/* end media query */

しかし、Boostrap にデフォルトで含まれているルールが機能しないのは奇妙だと思います。

.navbar .nav > li > .dropdown-menu:after
于 2012-10-11T15:37:24.560 に答える
0

本当の問題は、メディア クエリ固有のスタイルが機能していないことです。これは実際にはブーストラップに組み込まれています。

/* line 112, ../../../../../.rvm/gems/ruby-1.9.3-p194@tips/gems/bootstrap-sass-2.1.0.0/vendor/assets/stylesheets/bootstrap/_responsive-navbar.scss */
  .nav-collapse .dropdown-menu:before,
  .nav-collapse .dropdown-menu:after {
    display: none;
  }

しかし、私のブラウザが 979px をはるかに下回っていても、そのスタイルは認識されません。

https://www.evernote.com/shard/s3/sh/229f1ad6-99eb-4659-8e27-28950e9eb1db/36b7738b5c45a8d439dd39ef39fb5c77

したがって、意味のないブートストラップ メディア クエリの問題のようです。これは、Rails のアセット パイプラインと関係があるのでしょうか。

アップデート：

これを追加すると修正されます：

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    .navbar .nav > li > .dropdown-menu:after {
      display: none !important;
    }

}/* end media query */

しかし、それ!importantは本当に悪いことです。CSSでこの継承の問題を引き起こす原因となる、私が間違っていることを理解しようとしています。

于 2012-10-11T15:07:16.607 に答える