css - Bootstrapの垂直仕切りに線を引く方法は？

Question

Twitter Bootstrapを使用しています。次のメニューラインを描画する必要があります： https ：//www.dropbox.com/s/hl8moeabxxecu8j/dropdown.png 。

だから私は垂直の仕切りを通る線を引く必要があります。

これが私が今持っているものです-http://jsfiddle.net/KckU3/8/

作り方がわからない？

score 22 · Accepted Answer

22

単に使用する

<hr class="divider">

それはあなたが望むものを与えるはずです

于 2014-04-03T10:52:52.170 に答える

score 4 · Accepted Answer

4

今あります：

<li class="divider"></li>

于 2013-09-11T19:42:02.470 に答える

score 3 · Accepted Answer

.dropdown-toggleまず、クラスでタイプミスがありました。

次に、境界線のように見える垂直の仕切りを探しているのではなく、境界線を探しているので、その一部を非表示にする必要があります。

ここにあなたの手がかりがあります：

.navbar .nav > li > a.dropdown-toggle {
    position: relative;
    bottom: -1px;
    z-index: 1005;
    background: white;
    padding-bottom: 12px;
}

ul.nav li.dropdown:hover ul.dropdown-menu {
    /* ... */
    border-top: 1px solid #000;
}

これpadding-bottomは、実際にはデフォルトで定義されているよりも1ピクセル多くなります。

他の重要なことは、左または右への位置です：

ul.nav li.dropdown:hover ul.dropdown-menu {  
    /* ... */
    left: 0px;
}

私はより良い効果のために他のいくつかのことを修正しました、しかしあなたは主な考えを持っています。

jsfiddleを更新しました

score 1 · Accepted Answer

1

私があなたを正しく理解していれば

<li><hr></li>

役に立つはずです

于 2012-07-09T06:31:59.077 に答える

score 0 · Accepted Answer

あなたの投稿はやや紛らわしいですが、あなたが投稿した画像から、ドロップダウン付きのタブ付きメニューを作成したいようですか？もしそうなら、Bootstrapはすでにそれを可能にします。

タブメニュー：http ：//twitter.github.com/bootstrap/components.html#navs ドロップダウン：http ：//twitter.github.com/bootstrap/javascript.html#dropdowns

これをまとめたデモは次のとおりです：http：//jsfiddle.net/LWTqS/

css - Bootstrapの垂直仕切りに線を引く方法は？

5 に答える 5

Related

Reference