Bootstrapで、要素が横並びにならない。

サイト模写をしています。
Bootstrapでレスポンシブデザインにしようとしたのですが、要素が横並びにならないので困っています。
原因は何でしょうか。
Bootstrap 4.5.0

html
1 <div class="container">
2                   <div class="row">
3                    <div class="ox">
4                       <div class="col-lg-6 px-4">
5
6                         <div>大切なお家にお迎えする相手選びは、信頼第一で進めたいですよね。 その思いに応えるため、Airbnbでは宿泊者に求める厳格な要件をホスト自身の手で設定し、滞在前にお互い交流できるシステムを採用しています。 万一のトラブルのときには、Airbnbが全力でサポートします。 建物・家財の被害は「ホスト保証」、賠償責任は「ホスト補償保険」でカバー。ホストのみなさまのあらゆるシチュエーションに対処しています。</div>
7                         
8                         <div class="btn-bb">
9                           <div>ホストを守るAribnbの仕組みをチェック</div>
10                         </div> 
11                       </div>
12                     </div>
13
14                     <div class="col-lg-6">
15                       <div>
16                         <img src="img/pic4.svg" class="pcpc"><div class="oi">予約前に政府発行の身分証明書を求める権限</div>
17                      </div>
18                      <div>
19                        <img src="img/pic4.svg" class="pcpc"><div class="oi">ハウスルールに同意しないと泊まれない</div>
20                      </div>
21                      <div>
22                        <img src="img/pic4.svg" class="pcpc"><div class="oi">過去の宿泊のレビューもばっちり読める</div>
23                      </div>
24                      <div>
25                        <img src="img/pic4.svg" class="pcpc"><div class="oi">財物損害は¥100,000,000まで無料で補償</div>
26                      </div>
27                      <div>
28                        <img src="img/pic4.svg" class="pcpc"><div class="oi">$1,000,000の賠償責任保険が無料で付帯</div>
29                      </div>
30                      <div>
31                        <img src="img/pic4.svg" class="pcpc"><div class="oi">24時間365日対応グローバルカスタマーサポート</div>
32                      </div>
33                    </div>
34                      
35                   </div>
36                  </div>

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

回答1件

ベストアンサー

<div class="ox">が不要です。(.rowと.col-xxの親子関係が崩れるdivを挿入することがNGです。)

コメントアウトすると横並び表示ができるようになるので試してみてください。どうしても「ox」というクラスが必要なのであれば、「.col」「.row」「.rowの親要素」のいずれかに指定してください。

HTML
1<div class="container">
2  <div class="row">
3    <!--<div class="ox">-->
4      <div class="col-lg-6 px-4">
5        (省略)
6      </div>
7      <div class="col-lg-6">
8        (省略)
9      </div>
10    <!--</div>-->
11  </div>
12</div>