Q&ABootstrap4で横にスライドするメニューを作っています。
overflow-autoクラスを知り実装しました。
ただ動きが「横」ではなく、「縦」でした。
公式（https://cccabinet.jpn.org/bootstrap4/utilities/overflow）見ても縦しか載っていません。
横にする方法はあるのでしょうか。。
Bootstrap(index.php)
1<!--タブメニュー--> 2 <ul class="nav headerMenuTabs overflow-auto"> 3 <li class="nav-item active"><a href="#" class="nav-link">おすすめ</a></li> 4 <li class="nav-item"><a href="#" class="nav-link">マガジン</a></li> 5 <li class="nav-item"><a href="#" class="nav-link">人気ランキング</a></li> 6 <li class="nav-item"><a href="#" class="nav-link">ピックアップ</a></li> 7 <li class="nav-item"><a href="#" class="nav-link">注目カテゴリ</a></li> 8 </ul> 9 10 <ul class="nav headerMenuTabs"> 11 <li class="nav-item"><a href="#" class="nav-link">#20代</a></li> 12 <li class="nav-item"><a href="#" class="nav-link">#30代</a></li> 13 <li class="nav-item"><a href="#" class="nav-link">#40代</a></li> 14 <li class="nav-item"><a href="#" class="nav-link">#50代</a></li> 15 </ul>
index.css
1 2.headerMenuTabs{ 3 width:100%; 4 height: 40px; 5 } 6 7/*縦にならず 8.headerMenuTabs{ 9 overflow-x:scroll; 10 overflow-y:hidden; 11 flex-wrap: nowrap; 12}
結果
回答1件
0
ベストアンサー
下記のtableを使って解決しました。
英語だと問題ないですが日本語だとwidthが狭くなると縦書き状態になるので子要素にtext-nowrapクラス付与すると綺麗になりました。
index.php
1<div class="table-responsive"> 2 <table class="table table-bordered table-striped"> 3 <tbody> 4 <tr class="sample"> 5 <td class="text-nowrap headerTabMenu">おすすめ</td> 6 <td class="text-nowrap headerTabMenu">マガジン</td> 7 <td class="text-nowrap headerTabMenu">人気ランキング</td> 8 <td class="text-nowrap headerTabMenu">ピックアップ</td> 9 <td class="text-nowrap headerTabMenus">注目カテゴリ</td> 10 </tr> 11 <tr> 12 <td class="text-nowrap">#20代</td> 13 <td class="text-nowrap">#30代</td> 14 <td class="text-nowrap">#40代</td> 15 <td class="text-nowrap">#50代</td> 16 <td class="text-nowrap">#60代</td> 17 </tr> 18 </tbody> 19 </table> 20 </div>
投稿2019/08/24 05:23
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。