58

ブートストラップ 2 では、ドロップダウン メニューに上向きの矢印が表示されていました (ここで はキャレットについて話しているわけではありません)。現在、ブートストラップ 3 または最新の git を使用すると、この矢印は以下の単純な例にも、ブートストラップ ホームページの例にも存在しません。

ブートストラップ 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>

PS:正確には、別のスタックオーバーフローの記事で写真を見ることができます。

4

4 に答える 4

3

Alexander Mistakidis が提供した CSS は正しいです。つまり、Bootstrap のドロップダウン メニューの上に矢印を作成します。レスポンシブ ビュー (@user2993108) で正しく配置するために、異なるメディア クエリまたはブレークポイントleftで各クラス セレクター ( .dropdown-menu:before、 ) の属性を変更できます。.dropdown-menu:after

例えば...

@media (max-width: 400px) {

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 30px; /* change for positioning */
  ...
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 31px; /* change for positioning */
  ...
}

}

@media (max-width: 767px) and (min-width: 401px) {

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 38px; /* change for positioning */
  ...
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 39px; /* change for positioning */
  ...
}

}

等々...

于 2014-04-15T20:15:16.270 に答える
2

これは、Alexander Mistakidis と Joyrex による作業に基づいて構築され、オプションの矢印とドロップアップ メニューをサポートします。私の場合、すべてのドロップダウン メニューに矢印を表示したくはありませんでした。

arrowこれで、要素にクラスを追加しdropdown-menuて矢印を取得します。Bootstrap がドロップダウン/ドロップアップを左に配置している場合はarrow-right、矢印を反対側に移動するためにも追加します。

// add an arrow to the dropdown menus
.dropdown-menu.arrow:before {
  position: absolute;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  content: '';
}
.dropdown-menu.arrow:after {
  position: absolute;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: '';
}

// postion at the top for a 'down' menu
.dropdown .dropdown-menu.arrow:before {
  top: -7px;
  border-bottom: 7px solid #ccc;
  border-bottom-color: rgba(0, 0, 0, 0.2);
}
.dropdown .dropdown-menu.arrow:after {
  top: -6px;
  border-bottom: 6px solid #ffffff;
}

// postion at the bottom for an 'up' menu
.dropup .dropdown-menu.arrow:before {
  bottom: -7px;
  border-top: 7px solid #ccc;
  border-top-color: rgba(0, 0, 0, 0.2);
}
.dropup .dropdown-menu.arrow:after {
  bottom: -6px;
  border-top: 6px solid #ffffff;
}

// support to move the arrow to the right-hand-side
.dropdown-menu.arrow.arrow-right:before,
.dropup .dropdown-menu.arrow.arrow-right:before {
  right: 15px;
  left: auto;
}
.dropdown-menu.arrow.arrow-right:after,
.dropup .dropdown-menu.arrow.arrow-right:after {
  right: 16px;
  left: auto;
}
于 2016-02-26T00:12:33.170 に答える