BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。
HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。
CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
Q&A
解決済
2回答
1205閲覧
総合スコア8
0グッド
0クリップ
投稿2020/12/07 03:44
0
Airbnb模写をしている最中ですが、ナビバー部分をレシポンシブ対応(スマホ版)させたいのですが、575px以下になると文字が消えてしまいます。ググって見たのですが、解決の糸口が見つからず何でも結構ですのでご教授願います。
※スマホのレスポンシブ対応→現状問題ありのもの bootstrapを使い、navber-expend-smを記載しているが、575px以下になると「ガクっと」文字が消えてしまう
※スマホのレスポンシブ対応→このように表示させたい
実際のコード
PCのレスポンシブ対応→問題なし
タブレットのレスポンシブ対応→問題なし
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
質問へのコメント
回答2件
クラス名にnavbar-expand-lg navbar-expand-md navbar-expand-smと並べていますが、すべてのサイズで展開させたい場合はnavbar-expandだけでいいはずです。
navbar-expand-lg navbar-expand-md navbar-expand-sm
navbar-expand
html1<nav class="navbar navbar-expand navbar-light bg-white fixed-top">
html
1<nav class="navbar navbar-expand navbar-light bg-white fixed-top">
仮にsmのサイズ以上で展開させたい場合はnavbar-expand-smだけでよく、すべてのサイズで折り畳みたい場合はnavbar-expand{-sm|-md|-lg|-xl}は必要ありません。
navbar-expand-sm
navbar-expand{-sm|-md|-lg|-xl}
投稿2020/12/08 16:12
総合スコア1907
ベストアンサー
Bootstrap では collapseクラスをつけた要素は、折りたたまれ表示されません。
navbar-expand-{break-point}クラスが祖先にあれば、そのブレークポイントでは折りたたまれたものが展開されます。
参考: Responsive behaviors | Navbar - Bootstrap 4.2 - 日本語リファレンス
投稿2020/12/07 05:53
総合スコア36960
回答へのコメント
2020/12/13 10:56
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
15分調べてもわからないことはteratailで質問しよう!
ただいまの回答率85.35%
質問をまとめることで思考を整理して素早く解決
テンプレート機能で簡単に質問をまとめる
【Airbnb模写】ナビバーでレスポンシブ対応(スマホ版)した時文字が消えてしまう
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。