bootstrapでｘｓの時の指定が効かない

問題点

サイトAirbnbの模写コーディングをしています。
ブレークポイントxsの時だけbootstrapが効いてくれません。lgでも効いてくれるのですが、lgのブレークポイントはおそらく940pxにもかかわらず、940pxの幅で変化している様子はありません。きちんとブレークポイント通りに効いてくれるのはsmだけです。headerをコーディングしているときにハマりました。

HTML
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    
7      <!-- Bootstrap CSS -->
8      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
9
10      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
11    <meta name="viewport" content="width=device-width, initial-scale=1.0">
12    <link rel="stylesheet" href="responsive.css">
13   
14
15    <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
16    <link rel="stylesheet" href="style.css">
17
18    <title>airbnb</title>
19  </head>
20<header class="container-fluid">
21  <div class="header row">
22    <div class="col-xs-12 col-sm-12 col-lg-6">
23      <div class="header-lg-sm row">
24    <div  class="item col-xs-2 col-sm-2 col-lg-3  fab fa-airbnb h-100"><a href="#"></a></div>
25    <div class="item col-xs-2 col-sm-2 col-lg-2"><a href="#">概要</a></div>
26    <div class="item col-xs-2 col-sm-2 col-lg-2"><a href="#">準備</a></div>
27    <div class="item col-xs-2 col-sm-2 col-lg-2"><a href="#">安全</a></div>
28    <div class="item col-xs-2 col-sm-2 col-lg-3"><a href="#">マネープラン</a></div>
29  </div>
30</div>
31</div>
32</header>
33
34    <body class="container-fluid">
35      <div class="body-box">
36            
37      
38          <top class="row">
39            <div class="top-img col-sm-12 col-lg-12">
40            </div>
41      
42            <div class="top">
43              <section class="t-1">
44              <h2> 最大ホスティング収入：
45                <span>¥ 70,941 </span>／1か月、エリア：
46                Fukuoka</h2>
47        <a href="#">予想ホスティング収入額の計算方法</a>
48              </section>
49              <section class="t-2">
50                <h2>予想ホスティング収入額を更新するにはお部屋についてさらに詳しくお聞かせください</h2>
51                <form action="#" method="POST" name="information" class="information">
52                  <input type="text" name="location"> 
53                  <select name="roomtype">
54                    <option value="まるまる貸し切り"> まるまる貸し切り</option>
55                   
56                  </select>
57                  <select name="member">
58                    <option value="0">ゲスト0人</option>
59                
60                  </select>
61                </form>
62          
63                <div class="hidden">
64                  <input type="checkbox" id="hidden-input">
65                  <label for="hidden-input"  class="fas fa-plus">ゲストが利用できる特別なスペースがあればお知らせください</label>
66                  <div class="hidden-form">
67                    <form action="#" method="POST" name="building-type">
68                      <select name="building-type">
69                        <option value=" マンション・アパート">マンション・アパート</option>
70      
71                      </select>
72                      <select name="bedroom">
73                        <option value=""hidden>寝室</option>
74                        
75                      </select>
76                      <select name="bathroom">
77                        <option value=""hidden>バスルーム</option>
78                        <option value="0">0寝室</option>
79               
80                      </select>
81                    </form>
82      
83                  </div>
84                  
85                    <input type="checkbox" id="hidden-input-2">
86                    <label for="hidden-input-2" class="fas fa-plus">特別なアメニティ・設備の追加</label>
87                    <div class="hidden-form-2">
88                      <p>ゲストに人気の特別なアメニティ・設備がある場合は、お知らせください</p>
89                        <form action="#" method="POST" class="check-b">
90      
91                          <div class="check-content">
92                            <div class="check-contents"><input type="checkbox" id="hid-2-1"><label for="hid-2-1">ジム</label></div>
93                            
94                            <div class="check-contents"> <input type="checkbox" id="hid-2-2"><label for="hid-2-2">露天風呂・ジャグジー</label></div>
95                          
96                            <div class="check-contents"><input type="checkbox" id="hid-2-3"><label for="hid-2-3">プール</label></div>
97                          </div>
98      
99                          <div class="check-content">
100                            <div class="check-contents"><input type="checkbox" id="hid-2-4"><label for="hid-2-4">ウォーターフロント</label></div>
101                            
102                            <div class="check-contents"><input type="checkbox" id="hid-2-5"><label for="hid-2-5">ビーチフロント</label></div>
103                          </div>
104                          
105                        </form>
106                    </div>
107                  
108                </div>
109      
110                </div>
111                <button type="button" class="top-btn" value="get-started!">リスティングの掲載をはじめる</button>
112              </section>
113            
114          </top>
115</div>
116   </body>
117</html>

css
1*{
2  box-sizing: border-box;
3}
4.container-fluid{
5  padding: 0%;
6}
7.row{
8  margin: 0%;
9}
10.body-box{
11  padding: 0 5%;
12}
13
14header{
15height: 80px;
16}
17.header-lg-sm{
18  display: flex;
19  justify-content: start;
20  align-items: center;
21  text-align: center;
22}
23.item {
24  display: inline-block;
25}
26.fa-airbnb{
27  font-size: 14px;
28  line-height: 70px;
29}
30.top-img{
31  width: 100%;
32  padding-top: 50%;
33  background-image: url(image/istockphoto-1207862114-170667a.jpg);
34  object-fit: fill;
35  background-size: cover;
36
37}
38.t-1 h2{
39   font-size: 40px;
40   font-weight: 800;
41   line-height: 42px;
42   color: #222222;
43}
44.t-1 span{
45  color: #E41E57;
46}
47.t-1 a{
48  color: #222222;
49  text-decoration: underline;
50}
51.information{
52  display: flex;
53  flex-direction: column;
54}
55.information input,select{
56  width: 100%;
57}
58#hidden-input{
59  display: none;
60}
61#hidden-input-2{
62  display: none;
63}
64#hidden-input-2+label {
65  padding: 0%;
66  margin: 0%;
67  height: 0;
68  overflow: hidden;
69  opacity: 0;
70}
71.hidden-form{
72  padding: 0%;
73  margin: 0%;
74  height: 0;
75  overflow: hidden;
76  opacity: 0;
77}
78
79#hidden-input:checked~.hidden-form{
80  padding: 10px 0;
81  height: auto;
82  opacity: 1;
83  overflow: visible;
84}
85 #hidden-input:checked~#hidden-input-2+label{
86      padding: 10px 0;
87      height: auto;
88      opacity: 1;
89      overflow: visible;
90    }
91
92.hidden-form-2{
93  padding: 0%;
94  margin: 0%;
95  height: 0;
96  overflow: hidden;
97  opacity: 0;
98}
99#hidden-input-2:checked~.hidden-form-2{
100  padding: 10px 0;
101  height: auto;
102  opacity: 1;
103  overflow: visible;
104}
105.t-1{
106  border-bottom:1px gray solid;
107  padding-top: 24px;
108  padding-bottom: 34px;
109}
110.t-1 a{
111  padding-top: 22px;
112}
113.t-2 h2{
114  margin: 32px 0 32px 0;
115  line-height: 24px ;
116  font-size: 18px;
117  color: #222222;
118  font-weight: 400;
119}
120.information input,select{
121  height: 55px;
122}
123.hidden-form-2 form{
124  display: flex;
125  justify-content: start;
126  height: 144px;
127  width: 100%;
128}
129.hidden-form-2 label{
130  font-size: 16px;
131  line-height: 20px;
132  font-weight: 400;
133  color: #222222;
134}
135.check-content{
136  width: 144px;
137}
138.check-contents{
139  margin-bottom: 24px;
140  display: flex;
141  align-items: flex-start;
142}
143.check-contents input{
144  transform: scale(1.5);
145  margin: 0px 10px;
146}
147.top-btn{
148  background-color: #E61E52;
149  border-radius: 5px;
150  height: 55px;
151  line-height: 55px;
152  width: 100%;
153  text-align: center;
154  border: none;
155  color: #fff;
156}
157

行動規範の内容に同意します

回答1件

ベストアンサー

ブレークポイントxsの時だけbootstrapが効いてくれません。

以前の回答でもご説明したような気がするのですが、Bootstrap のブレークポイントに xs というものはないです。

グリッドレスポンシブは,5つのグリッドブレークポイントがあります。(extra small, small, medium, large, extra large)
グリッドブレークポイントは, 最小幅のメディアクエリに基づいています。(例 .col-sm-4 は small, medium, large, extra large に適用されますが最初の xsブレークポイントにはなりません)