Twitterのブートストラップを使用してインラインでリストを表示する方法

Bootstrapを使用してインラインでリストを表示したい。これを実現するためにBootstrapから追加できるクラスはありますか？

ブートストラップ2.3.2

<ul class="inline">
  <li>...</li>
</ul>

ブートストラップ3

<ul class="list-inline">
  <li>...</li>
</ul>

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

更新されたリンクhttps://getbootstrap.com/docs/4.4/content/typography/#inline

2.3.2と3のBootstrapドキュメントによると、クラスは次のように定義する必要があります。

ブートストラップ2.3.2

<ul class="inline">
  <li>...</li>
</ul>

ブートストラップ3

<ul class="list-inline">
  <li>...</li>
</ul>

TheBrentの答えは一般的には真実ですが、公式のブートストラップ方法でそれを行う方法の質問には答えません。ブートストラップのマークアップは簡単です：

<ul class="inline">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

ソース

http://jsfiddle.net/MgcDU/4602/

レイモンドの答えを完成させる

ブートストラップ2.3.2

<ul class="inline">
  <li>...</li>
</ul>

ブートストラップ3

<ul class="list-inline">
  <li>...</li>
</ul>

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

bootstrap.cssファイル内に特定のものが見つかりませんでした。そのため、CSSをカスタムCSSファイルに追加しました。

.inline li {
    display: inline;
}

私は驚いたことに、リスト・インラインがブートストラップ4で機能していなかったので、ついにブートストラップ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

このソリューションは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; }

インラインは、実際に必要となる可能性があるインラインではありません。つまり、display：inline

私が観察している限り、ブートストラップはインラインで、より水平な方向です

リストを他の要素とインラインで表示するには、次のことが必要です。

display: inline; added to the UL

<ul class="unstyled inline" style="display:inline">

NB //スタイルシートに追加

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;
}