December 27, 2017

横幅の狭い画面でBootstrapのNavを横スクロールさせる

HTML:

<div class="nav-tabs-wrap">
  <ul class="nav nav-tabs">
    <li><a href="#">hoge</a></li>
    <li><a href="#">hoge</a></li>
    <li><a href="#">hoge</a></li>
    <li><a href="#">hoge</a></li>
    <li><a href="#">hoge</a></li>
    <li><a href="#">hoge</a></li>
    <li><a href="#">hoge</a></li>
    <li><a href="#">hoge</a></li>
  </ul>
</div>

CSS:

.nav-tabs-wrap {
  overflow-y: none;
  overflow-x: auto;
  white-space: nowrap;
}

.nav-tabs-wrap .nav {
  display: inline-block;
  width: 100%;
}

.nav-tabs-wrap .nav > li {
  display: inline-block;
  float: none;
}

サンプル: https://codepen.io/anon/pen/KZarLe

Amazonトップのほしいものリスト等の横並びのリストの作り方を参考にした。