質問: ### teratailのようなタブ型ナビゲーションを実現するには。 題目通りです。 私はteratailに入り浸って日々を過ごすことが多く、いつからかこのようなサイトを自作したいと思いました。 そしてまずトップ画面にあるフォロー、新着、アクティブ・・・のようなタブ型ナビゲーションをbootstrapを利用して作りました。 ``` フォロー 新着 アクティブ 未回答 未解決 注目 解決済み ``` しかし私が作ったナビゲーションは、以下の画像のようにウィンドウを小さくすると、下に下がってしまいました。(これはteratailの動作とは違います。teratailはそのまま不変のようです。) ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/e1ef00e167764586d7dd8ee3a12f1597.png) もちろんこれこそがレスポンシブデザインであることなのは承知なのですが、今回に限っては下がって欲しくありません。 これはなにかclassの名前をいじれば直せるものでしょうか? それともbootstrapはレスポンシブありきだから、bootstrapをなくして1から作るべきでしょうか・・・(特にteratailのようなサイトを作る場合は) まだ方向性を決めていくような、手探りの段階ですので、判断に迷っています。 みなさんの意見を聞かせていただけたらと思います。
回答: teratail と同じようにしたいということであれば、 `width` プロパティ、もしくは `min-width` プロパティによって、ナビゲーションの幅を固定することで、質問者さんの実現したいことが行なえると思います(動作確認用リンク)。 ``` フォロー 新着 アクティブ 未回答 未解決 注目 解決済み ``` ``` nav { min-width: 800px; } ```