html - 如何将包含两个 div 的列拆分为在较小的屏幕尺寸上并排放置的 div

Question

我在 CSS、HTML 和 Bootstrap 方面相当缺乏经验。

基本上我想知道如何将大屏幕上的单个列拆分为小屏幕上的两列，以便在调整窗口大小时，两个 div 的列并排放置而不是彼此重叠。

<div class= "container-fluid">
 <div class ="row">
  <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12"> 
   <canvas width="800" height="450">

   </canvas>
  </div>

  <div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
   <div id="Pseudo">

   </div>
   <div id="Element">

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

我希望 Pseudo 和 element div 在较小的设备上彼此相邻，在较大的设备上彼此重叠。它在大屏幕上运行良好。

我不确定我是否可以使用 bootstrap 来做到这一点，我已经尝试了很长时间但没有运气。

Answer 1

您需要为您的元素定义单个列，因为为它们定义外部列不会给您想要的结果。所以，我认为这样的事情可以解决问题:

#Pseudo {
  background-color: red;
}

#Element {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class= "container-fluid">
 <div class ="row">
  <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-9 "> 
   <canvas width="800" height="450">
   </canvas>
  </div>

  <div class="col-xl-9 col-lg-3 col-md-12 col-sm-12 col-3">
    <div class="row">
     <div class="col-6 col-sm-6 col-md-6 col-lg-12 col-xl-12" id="Pseudo">
      x
     </div>
     <div class="col-6 col-sm-6 col-md-6 col-lg-12 col-xl-12" id="Element">
      y
     </div>
   </div>
  </div>
 </div>
</div>