每当引导程序中的屏幕变为中时，我的列就会消失

Question

所以我试着基于这个网站做类似的设计：https://www.rezydencjagubalowka.pl/en/，当我展示房间的时候，我有一个问题，那就是当我把我的屏幕尺寸调整到更小的时候，我做的白色列(在Lorem ipsum的东西旁边)就消失了。你可以在这里看到代码：

<div class="pokaz">
         <div class="container">
            <div class="row pt-5">
               <div class="col-lg-6 bg-white" style="text-align: center;">
                  <svg class="bi bi-gem mt-3" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785l-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004l.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495l5.062-.005L8 13.366 5.47 5.495zm-1.371-.999l-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l2.92-.003 2.193 6.82L1.5 5.5zm7.889 6.817l2.194-6.828 2.929-.003-5.123 6.831z"/>
                  </svg>
                  <h1 class="font-weight-bold mt-2" style="color: #14747d;">Lorem ipsum</h1>
                  <h4 class="font-weight-lighter mt-4 text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
                  <button type="button" class="btn btn-outline-secondary">Czytaj więcej</button>
               </div>
               <div class="col-lg-6 bg-white">

            </div>
            </div>
         </div>
         <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-12 bg-white">

                </div>
               <div class="col-lg-6 bg-white" style="text-align: center;">
                  <svg class="bi bi-gem mt-3" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785l-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004l.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495l5.062-.005L8 13.366 5.47 5.495zm-1.371-.999l-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l2.92-.003 2.193 6.82L1.5 5.5zm7.889 6.817l2.194-6.828 2.929-.003-5.123 6.831z"/>
                  </svg>
                  <h1 class="font-weight-bold mt-2" style="color: #14747d;">Lorem ipsum</h1>
                  <h4 class="font-weight-lighter mt-4 text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
                  <button type="button" class="btn btn-outline-secondary">Czytaj więcej</button>
               </div>
            </div>
         </div>
         <div class="container pb-5">
            <div class="row">
               <div class="col-lg-6 bg-white" style="text-align: center;">
                  <svg class="bi bi-gem mt-3" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785l-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004l.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495l5.062-.005L8 13.366 5.47 5.495zm-1.371-.999l-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l2.92-.003 2.193 6.82L1.5 5.5zm7.889 6.817l2.194-6.828 2.929-.003-5.123 6.831z"/>
                  </svg>
                  <h1 class="font-weight-bold mt-2" style="color: #14747d;">Lorem ipsum</h1>
                  <h4 class="font-weight-lighter mt-4 text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
                  <button type="button" class="btn btn-outline-secondary">Czytaj więcej</button>
               </div>
               <div class="col-lg-6 bg-white">

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

有人愿意帮忙吗？我将在评论中包含codepen的链接

Answer 1

**remove class="col-lg-6 col-md-12 bg-white" marked ?? area .its empty. thats why it dissepears**

<div class="container">
   <div class="row">
      <div class="col-lg-6 col-md-12 bg-white">
            **??**
       </div>
       <div class="col-lg-6 bg-white" style="text-align: center;">
            <svg class="bi bi-gem mt-3" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
             <path fill-rule="evenodd" d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785l-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004l.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495l5.062-.005L8 13.366 5.47 5.495zm-1.371-.999l-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l2.92-.003 2.193 6.82L1.5 5.5zm7.889 6.817l2.194-6.828 2.929-.003-5.123 6.831z"/>
                  </svg>
                  <h1 class="font-weight-bold mt-2" style="color: #14747d;">Lorem ipsum</h1>
                  <h4 class="font-weight-lighter mt-4 text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
                  <button type="button" class="btn btn-outline-secondary">Czytaj więcej</button>
               </div>
            </div>
         </div>
         <div class="container pb-5">
            <div class="row">
               <div class="col-lg-6 bg-white" style="text-align: center;">
                  <svg class="bi bi-gem mt-3" width="3em" height="3em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                     <path fill-rule="evenodd" d="M3.1.7a.5.5 0 0 1 .4-.2h9a.5.5 0 0 1 .4.2l2.976 3.974c.149.185.156.45.01.644L8.4 15.3a.5.5 0 0 1-.8 0L.1 5.3a.5.5 0 0 1 0-.6l3-4zm11.386 3.785l-1.806-2.41-.776 2.413 2.582-.003zm-3.633.004l.961-2.989H4.186l.963 2.995 5.704-.006zM5.47 5.495l5.062-.005L8 13.366 5.47 5.495zm-1.371-.999l-.78-2.422-1.818 2.425 2.598-.003zM1.499 5.5l2.92-.003 2.193 6.82L1.5 5.5zm7.889 6.817l2.194-6.828 2.929-.003-5.123 6.831z"/>
                  </svg>
                  <h1 class="font-weight-bold mt-2" style="color: #14747d;">Lorem ipsum</h1>
                  <h4 class="font-weight-lighter mt-4 text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4>
                  <button type="button" class="btn btn-outline-secondary">Czytaj więcej</button>
               </div>
               <div class="col-lg-6 bg-white">

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

Answer 2

好吧，我找到了一个解决方案。我只是不得不把

<div class="col-lg-6 p-0">
<img src="img/hotel-room.jpg" class="img-fluid" alt="Responsive image">
</div> 

在col的类名中添加一张照片和"p-0“，以使照片看起来更干净