☰

ドロップダウンメニューのbootstrap 3矢印 質問する

tag-icon • tag-icon css twitter-bootstrap-3
ドロップダウンメニューのbootstrap 3矢印 質問する

Bootstrap 2では、ドロップダウンメニューには上向きの矢印がありました。ここ（私はキャレットについて話しているのではありません）。現在、bootstrap 3または最新のgitを使用すると、この矢印は下の簡単な例にも、例ブートストラップのホームページで。

この矢印を Bootstrap 3 を使用して再度追加するにはどうすればよいですか?

  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Menu
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#">a</a></li>
      <li><a href="#">b</a></li>
      <li><a href="#">c</a></li>
    </ul>
  </li>

追記：正確には、この写真は別のstackoverflowの記事。

ベストアンサー1

:after および :before CSS ルールを に追加する必要がありますdropdown-menu。これらのルールは Bootstrap 2 から取得され、ドロップダウンの上に三角形を描画するものです。

JSFiddle デモ

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

どう混乱するんですか?CSSの三角形を説明するアニメーションはこちらをご覧ください

おすすめ記事