如何在较小的屏幕尺寸上将包含两个div的列彼此拆分成div并排

Question

我对CSS，HTML和引导程序缺乏经验。

基本上，我想知道如何在大屏幕上将单个列拆分为小屏幕上的两列，以便在调整窗口大小时两个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 divs在较小的设备上彼此相邻，在较大的设备上彼此相邻。 在大屏幕上正常工作。

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

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> 

Answer 2

从您的代码中，您没有采取任何措施使Pseudo and element divs动态化。

这很有趣，因为您尝试实现的目标是正确的：

   <canvas width="800" height="450">
   </canvas>

和

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

这两个部分是动态的。 因此，您应该为这些div实施相同的方法。

像这样：

<div class ="row">

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

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

</div>

而且您不必担心其他人。 Bootstrap接受嵌套的行。