Bootstrapでリストを横並びにする方法
HTMLのリスト要素（li）は、通常縦に並べて表示されます。しかし、ナビゲーションメニューや商品一覧など、デザインによってはリストを横に並べたい場合があります。Bootstrapでは、CSSの複雑な設定なしに、簡単にリストを横並びに配置することができます。
list-inlineクラスを利用する
Bootstrapには、リストを横並びにするための便利なクラスlist-inlineが用意されています。このクラスを<ul>要素に適用するだけで、リストアイテム（<li>要素）が横に並べて表示されます。
HTMLの例
<ul class="list-inline">
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
</ul>
表示例
- リストアイテム1
- リストアイテム2
- リストアイテム3
リストアイテム間の余白調整
list-inlineクラスを適用すると、リストアイテムの間にはデフォルトの余白が設定されます。この余白は、.list-inline-itemクラスを<li>要素に適用することで調整できます。
HTMLの例
<ul class="list-inline">
<li class="list-inline-item">リストアイテム1</li>
<li class="list-inline-item">リストアイテム2</li>
<li class="list-inline-item">リストアイテム3</li>
</ul>
.list-inline-itemクラスには、左右の余白を調整するためのユーティリティクラスが用意されています。例えば、.mr-3クラスを適用すると右側にmargin-right: 1rem（約16px）の余白が設定されます。
HTMLの例
<ul class="list-inline">
<li class="list-inline-item mr-3">リストアイテム1</li>
<li class="list-inline-item mr-3">リストアイテム2</li>
<li class="list-inline-item">リストアイテム3</li>
</ul>
表示例
- リストアイテム1
- リストアイテム2
- リストアイテム3
レスポンシブデザインへの対応
Bootstrapのグリッドシステムと組み合わせることで、画面サイズに応じてリストの表示を調整することができます。例えば、スマートフォンなどの小さな画面ではリストを縦に並べ、タブレット以上の画面サイズでは横に並べるといったことが可能です。
HTMLの例
<div class="container">
<ul class="list-inline d-none d-md-block">
<li class="list-inline-item">リストアイテム1</li>
<li class="list-inline-item">リストアイテム2</li>
<li class="list-inline-item">リストアイテム3</li>
</ul>
<ul class="d-md-none">
<li>リストアイテム1</li>
<li>リストアイテム2</li>
<li>リストアイテム3</li>
</ul>
</div>
上記の例では、.d-noneクラスと.d-md-blockクラスを使用することで、中画面サイズ（md）以上の画面幅でのみリストを横に並べて表示しています。
参考資料
よくある質問
Q1: list-inlineクラスを使わずにリストを横並びにすることはできますか？
はい、可能です。CSSのdisplayプロパティをinline-blockに設定することで、リストアイテムを横に並べることができます。ただし、この場合はリストアイテム間の余白調整などを自分で行う必要があります。
Q2: リストアイテムを縦中央揃えにするにはどうすればよいですか？
リストアイテムを縦中央揃えにするには、align-items-centerクラスを<ul>要素に適用します。
Q3: list-inlineクラスはBootstrap 4以降で利用できますか？
はい、list-inlineクラスはBootstrap 4以降で利用できます。
その他の参考記事: