Question

我对CSS，HTML和bootstrap缺乏经验。

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

<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在较小的设备上彼此相邻，并且在较大的设备上彼此叠加。它在大屏幕上工作正常。

我不确定我是否可以使用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>

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接受嵌套行。

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

2 个答案: