web-dev-qa-db-ja.com

Twitter Bootstrap Componentを使用して順序付きリストを作成する方法は？

私はシンプルな順序付きリストを持っています、とても簡単です：

http://www.bootply.com/P8wglPiSVD

次のようになります。

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <ol class="list-group">
                <li class="list-group-item">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, aliquid.</p>
                </li>
                <li class="list-group-item">
                    <p>Quos nostrum provident ex quisquam aliquid, hic odio repellendus atque.</p>
                </li>
                <li class="list-group-item">
                    <p>Facilis, id dolorum distinctio, harum accusantium atque explicabo quidem consectetur.</p>
                </li>
            </ol>
        </div>
    </div>
</div>

しかし、Twitter bootstrapは番号付きのリストですが、番号は表示されません。

検索しましたが、リスト項目を順序付けするTwitter bootstrapコンポーネントが見つからなかったため、興味がありました。順序付きリスト用のTwitter Bootstrapの定義済みスタイルに欠けているものはありますか、それとも何か不足していますか？

敬具、

ジョージ

htmlcsstwitter-bootstrap
16
LoveAndHappiness

Bootstrapはdisplay: blockをリストアイテムに適用しているため、番号付けが削除されます。これをCSSに追加します。

.list-group-item {
    display: list-item;
}

http://www.bootply.com/ZHQBWK9sHB

11
Steve Sanders

@Steve Sandersと@beiping_troopの回答を組み合わせて、次のCSSで整理されたリストグループを作成できます。

.list-group {
    list-style: decimal inside;
}

.list-group-item {
    display: list-item;
}

http://www.bootply.com/BJadu6Ja6R

24
inostia

手動のCSSスタイルは、bootstrap CSSによってオーバーライドされ、上記のスタイルを強制的に！importantの値の後に置くことができます

.list-group {
    list-style: decimal inside !important
}

.list-group-item {
    display: list-item !important
}
2
Jayant

整理されたリストの場合は、番号付きリストを1か所で呼び出すだけなので、インラインスタイルのオーバーライドを選択しました。それはうまくレンダリングされました：

<ol style="list-style: decimal inside;">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

私の参照はもともとここにありました： ブートストラップ：順序付けられたリストからの数字は、メディアオブジェクトを使用すると消えます

2
beiping_troop

より良い解決策は、たとえば「list-group-numbered」または「list-group-alpha」など、必要な番号付けのスタイルに応じて新しいCSSクラスをリストグループに追加することですすべての番号付きリストに追加するのではなく、追加する順序付きリスト、特に間違ったように見える番号付きリストがあるWebサイトの他の場所がある場合...

.list-group-numbered { list-style: decimal inside; }
.list-group-alpha { list-style: lower-alpha inside; }
.list-group-roman { list-style: lower-roman inside; }
.list-group-alpha >li, .list-group-numbered >li { display: list-item }

次に、htmlに以下を入力します。

<ol class="list-group list-group-numbered">
    <li class="list-group-item">an item
        <ol class="list-group list-group-alpha">
            <li class="list-group-item">a sub item
                <ol class="list-group list-group-roman">
                    <li class="list-group-item">a sub-sub item</li>
                </ol>                
            </li>
        </ol>
    </li>
    <li class="list-group-item">another item</li>        
    <li class="list-group-item">a third item</li>
</ol>
1
TheKLF99