1

Bootstrap の最新バージョンを使用して、ドロップダウン ナビゲーション バーを作成しようとしています。ドロップダウンに 2 つの個別のリストがあり、縦に並んでいるドロップダウンを作成したいと思います (この Web サイトの空気清浄機のドロップダウンに似ています)。

現時点では、Bootstrap は水平方向の仕切りのみをサポートしているようです。これを回避するために使用できる css/html ハックを知っている人はいますか?

4

2 に答える 2

2

このフィドルを参照してください: http://jsfiddle.net/manishie/CVYq6/

基本的に、通常のブートストラップ ドロップダウンを取得して、ul から div に変更します。ただし、クラス名は同じままにします。その div 内には、何でも好きなものを入れることができます。

この場合、横に並べた 2 つのリストが必要ですが、画像や任意の html を使用することもできます。

Bootstrap はクラス名で機能するため、トグルをクリックすると、.dropdown-menu クラスにあるものは何でも表示されます。

HTML:

<div class="dropdown">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
  <div class="dropdown-menu" role="menu">
      <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
      </ul>
      <ul>
          <li>blah</li>
          <li>blah blah</li>
          <li>blah blah blah</li>
      </ul>
  </div>
</div>​

CSS:

.dropdown-menu ul {
    float: left;
}

.dropdown-menu ul:first-of-type {
    border-right: 1px solid black;
    padding-right:20px
}
​
于 2012-11-02T04:06:19.893 に答える
0

この機能は、そのままではまだ存在しないと思います。

github の関連する問題。

それをハックして手動で列を挿入するか、ブートストラップをまったく使用せずに実行することができます。

メニューにこれが必要な場合は、メガメニューまたはフレックスボックスを試すことができます

于 2012-11-02T00:27:26.297 に答える