Bootstrapを使ってインラインでリストを表示したい。これを実現するために Bootstrap から追加できるクラスはありますか?
質問する
410468 次
10 に答える
43
TheBrentの答えは一般的に真実ですが、公式のブートストラップ方法でそれを行う方法の質問には答えていません。ブートストラップのマークアップは単純です。
<ul class="inline">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
于 2012-12-23T00:48:24.780 に答える
15
bootstrap.cssファイル内に特定のものが見つかりませんでした。そこで、cssをカスタムcssファイルに追加しました。
.inline li {
display: inline;
}
于 2012-06-05T23:40:40.893 に答える
9
驚いたことに、ブートストラップ 4 では list-inline が機能していませんでしたが、最終的にはブートストラップ 4 のドキュメントで取得しました。
ブートストラップ 3 および 4
<ul class="list-inline">
<li class="list-inline-item">Lorem ipsum</li>
<li class="list-inline-item">Phasellus iaculis</li>
<li class="list-inline-item">Nulla volutpat</li>
</ul>
ソース: http://v4-alpha.getbootstrap.com/content/typography/#inline
于 2016-10-12T10:03:19.437 に答える
1
このソリューションは Bootstrap v2 を使用して機能しますが、TBS3 ではクラス INLINE. TBS3 で同等のクラス (存在する場合) が何であるかはわかりません。
この紳士は、v2 と v3 の違いについて非常に優れた記事を書いています。
http://mattduchek.com/differences-between-bootstrap-v2-3-and-v3-0/
編集 - CSS を使用してli要素をターゲットにし、以下のように問題を解決します
{ display: inline-block; }
私の状況では、LI ではなく UL をターゲットにしていました。
nav ul li { display: inline-block; }
于 2013-08-28T06:58:52.710 に答える
0
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
于 2021-10-08T08:03:34.533 に答える
-2
Bootstrap のドキュメントによると、クラス「インライン」をリストに追加する必要があります。このような：
<ul class="inline">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
ただし、クラス「インライン」を参照する Bootstrap CSS ファイルに欠落している CSS があるように見えるため、これは機能しません。さらに、CSS ファイルに次の行を追加して、機能させます。
ul.inline > li, ol.inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
于 2013-04-16T13:38:50.020 に答える
-2
Inline は、実際には必要なインラインではありません - つまり、display:inline
観察者がより水平方向である限り、インラインのブートストラップ
リストを他の要素とインラインで表示するには、必要です
display: inline; added to the UL
<ul class="unstyled inline" style="display:inline">
NB// スタイルシートに追加
于 2013-02-16T14:31:40.057 に答える