teratail
回答率
85.46%
質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう
ただいま回答率
85.46%
トップBootstrapに関する質問
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

899閲覧

airbnbレスポンシブ設定をしたい

ryosukepro
ryosukepro

総合スコア1

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/16 11:31

0

0

前提・実現したいこと

https://www.airbnb.jp/host/homes
airbnbの模写コーディングをしており、フッターの上にあるリストの塊のところで質問があります。
BootstrapXLサイズの時に4列にしたいのですが、縦一列になってしまったので、それぞれの列の親要素に<div class="col-12 col-xl-3">を加えたのですがその際に途中のmdのレスポンシブが消されてしまいました。途中のレスポンシブを反映させつつ、XLの際に4列にする方法を教えていただきたいです。

該当のソースコード

HTML CSS Bootstrap
ソースコード
HTML

<footer> <div class="container-fluid"> <div class="row"> 
                            <div class="col-12 col-xl-3">
                                            <div class="col-12 ">
                                                    <p>企業情報</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>Airbnbのご利用方法</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>ニュースルーム</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>Airbnb Plus</p>
                                            </div>

                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>Airbnb Luxe</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                            <p>HotelTonight</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>Airbnbビジネスプログラム</p>
                                            </div>


                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>オリンピック</p>
                                            </div> 
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>採用情報</p>    
                                            </div>  

                            </div>
                         


                            <div class="col-12 col-xl-3">
                                            <div class="col-12">
                                                    <p>コミュニティ</p>
                                            </div>
                                            
                                            <div class="col-12 col-md-3 col-xl-12">
                                                    <p>ダイバーシティ＆ビロンギング</p>
                                            </div>
                                            <div class="col-12 col-md-3 col-xl-12">
                                                    <p>アクセシビリティ対応</p>
                                            </div>
                                            <div class="col-12 col-md-3 col-xl-12">
                                                    <p>Airbnbアソシエイト</p>
                                            </div>

                                            <div class="col-12">
                                                    <p>お友達を招待</p>
                                            </div>
                            </div>
                     

                            <div class="col-12 col-xl-3">
                                            <div class="col-12">
                                                    <p>ホスト</p>
                                            </div>

                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>お部屋を掲載</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>オンライン体験をホストする</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>体験をホストする</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>責任あるホスティング</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>オープンホーム</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>リソースセンター</p>
                                            </div>
                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>コミュニティセンター</p>
                                            </div>
                           
                            </div>


                              
                            <div class="col-12 col-xl-3">

                                            <div class="col-12">
                                                    <p>サポート</p>
                                            </div>

                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>Airbnbの新型コロナウイルスに対する取り組み</p>
                                            </div>

                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>ヘルプセンター</p>
                                            </div>

                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>キャンセルオプション</p>
                                            </div>

                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p> 近隣コミュニティサポート</p>
                                            </div>

                                            <div class="col-12 col-md-4 col-xl-12">
                                                    <p>トラスト＆セーフティー </p>
                                            </div>
                            </div>

                           
                            
                    </div>
           </div>
    </footer>

CSS
なし

試したこと

ここに問題に対して試したことを記載してください。
それぞれの親要素に<div class="col-12 col-xl-3">を加え、レスポンシブをしようとしました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
bootstap4.5ver

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1件

0

ベストアンサー

col-*の設定を有効にするには、親要素がrowである必要があります。

html
1<footer>
2  <div class="container-fluid">
3    <div class="row">
4      <div class="col-12 col-xl-3">
5        <div class="row">           <!-- 挿入 -->
6          <div class="col-12 ">
7            <p>企業情報</p>
8          </div>
9          <div class="col-12 col-md-4 col-xl-12">
10            <p>Airbnbのご利用方法</p>
11          </div>
12          <div class="col-12 col-md-4 col-xl-12">
13            <p>ニュースルーム</p>
14          </div>
15          <div class="col-12 col-md-4 col-xl-12">
16            <p>Airbnb Plus</p>
17          </div>
18
19          <div class="col-12 col-md-4 col-xl-12">
20            <p>Airbnb Luxe</p>
21          </div>
22          <div class="col-12 col-md-4 col-xl-12">
23            <p>HotelTonight</p>
24          </div>
25          <div class="col-12 col-md-4 col-xl-12">
26            <p>Airbnbビジネスプログラム</p>
27          </div>
28
29          <div class="col-12 col-md-4 col-xl-12">
30            <p>オリンピック</p>
31          </div>
32          <div class="col-12 col-md-4 col-xl-12">
33            <p>採用情報</p>
34          </div>
35        </div>                      <!-- 挿入 -->
36      </div>
37
38  <!-- 以下同様に -->

投稿2020/11/16 12:47

編集2020/11/17 04:19
hatena19
hatena19

総合スコア33790

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ryosukepro
ryosukepro

2020/11/17 04:04

丁寧な回答ありがとうございます！ 送っていただいた結果を出力したのですが、XLサイズの際ニュースルーム、Airbnb PlusHote、lTonightだけ2列目に飛び出してしまいます。こちらを一列にまとめることは可能でしょうか。何度も質問してしまい申し訳ありません。
ryosukepro
ryosukepro

2020/11/17 05:12

丁寧なご回答ありがとうございます！ 全体の親要素としてのrowがつけ忘れていたんですね。 ありがとうございました。ベストアンサーにさせていただきます！
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップBootstrapに関する質問

airbnbレスポンシブ設定をしたい