teratailのようなタブ型ナビゲーションを実現するには。

Question

###teratailのようなタブ型ナビゲーションを実現するには。
題目通りです。
私はteratailに入り浸って日々を過ごすことが多く、いつからかこのようなサイトを自作したいと思いました。

そしてまずトップ画面にあるフォロー、新着、アクティブ・・・のようなタブ型ナビゲーションをbootstrapを利用して作りました。

<nav class="nav nav-tabs">
    <a class="nav-link" href="#">フォロー</a>
    <a class="nav-link" href="#">新着</a>
    <a class="nav-link" href="#">アクティブ</a>
    <a class="nav-link" href="#">未回答</a>
    <a class="nav-link" href="#">未解決</a>
    <a class="nav-link" href="#">注目</a>
    <a class="nav-link" href="#">解決済み</a>
</nav>

しかし私が作ったナビゲーションは、以下の画像のようにウィンドウを小さくすると、下に下がってしまいました。(これはteratailの動作とは違います。teratailはそのまま不変のようです。)

もちろんこれこそがレスポンシブデザインであることなのは承知なのですが、今回に限っては下がって欲しくありません。
これはなにかclassの名前をいじれば直せるものでしょうか？
それともbootstrapはレスポンシブありきだから、bootstrapをなくして1から作るべきでしょうか・・・(特にteratailのようなサイトを作る場合は)

まだ方向性を決めていくような、手探りの段階ですので、判断に迷っています。
みなさんの意見を聞かせていただけたらと思います。

Answer 1

teratail と同じようにしたいということであれば、 width プロパティ、もしくは min-width プロパティによって、ナビゲーションの幅を固定することで、質問者さんの実現したいことが行なえると思います(動作確認用リンク)。

<nav class="nav nav-tabs">
    <a class="nav-link" href="#">フォロー</a>
    <a class="nav-link" href="#">新着</a>
    <a class="nav-link" href="#">アクティブ</a>
    <a class="nav-link" href="#">未回答</a>
    <a class="nav-link" href="#">未解決</a>
    <a class="nav-link" href="#">注目</a>
    <a class="nav-link" href="#">解決済み</a>
</nav>

nav {
  min-width: 800px;
}

Comments

[hood]

回答ありがとうございます！ナビゲーションの幅を固定するやりかたがあったのですね・・・
スマホになったら横スクロールになっているようなので、その部分も含めて参考にさせていただきます！二度目にありますが、どうもありがとうございました！

Answer 2

teratailをスマートフォンから確認するとタブのところだけ横スクロールかかってます。
その角度から組みなおしてみては？

個人的な感想：
別に「teratailと全く同じ」にする必要はないかと思います。
teratailはteratailで何かしらの意図があってそうなっているように思いますし、
スマートフォンから確認しても全てがスマートフォン対応になっているわけではありません。
タブのところだけ見てもあまり意味がないように思います。

ご自身が作っていくWebサイトにはそのWebサイトに合ったやり方がありますので、もちろん「色々やっていきたい中の1つの参考先」として見るのは良いとは思いますが、それありきで作るのは良くないと思います。
Webサイトの目的や全体のバランスから考えてみてください。

※それにteratailの本分はプログラミングに特化したQ&Aプラットフォームなので、あまりデザイン性は求められてなくて、その部分はあまり注力されていないように思います。
大きい括りで掲示板と同じです。

Comments

[hood]

回答ありがとうございます！mts10806さんにはandroidのほうでもちょくちょくお世話になってますね・・・

teratailありきで作るのはよくないというところで、確かにと思いました。
まったく同じものができてもおもしろみがないですし・・・

タブのところだけ横スクロールになっていたのは確認済みですが、そこをもう少し考えてみようかと思います。ベストアンサーは少し早目に回答していただいたかたに差し上げようと思います。改めてありがとうございました。

[m.ts10806]

何かのヒントになったようで何よりです。
あくまで自身が作ろうとしているWebサイトの目的を主軸において検討してくださいね。

[hood]

はい！