javascript - Bootstrap 初学者 - 改变不同屏幕尺寸的 div 宽度

Question

我是 Bootstrap 的初学者。我正在努力实现以下目标:

To make a div that is 2 columns wide on medium and large viewports and 12 columns on extra small viewports.

我知道 bootstrap 在行和列中工作 (12)，并且列有断点，在这些断点处它们“中断”并堆叠，以及当屏幕尺寸发生变化时如何应用。因此，我不确定如何像上面那样更改 div 的宽度。

仅使用 Bootstrap 就可以做到这一点吗？

我认为这可以实现的方法是使用 javascript 获取屏幕大小(像素宽度)，然后更改 div 的宽度值。方法是什么？任何线索或建议都会有所帮助。

Answer 1

您可以根据视口(viewport)宽度简单地添加更多类:

<div class="row">
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
</div>

<div class="row">
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
   <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>

以上为较大视口(viewport)输出 4 列，中等视口(viewport)输出 3 列，较小视口(viewport)输出 2 列。

超小型设备 手机 (<768px) 小型设备 平板电脑 (≥768px) 中型设备 台式机 (≥992px) 大型设备 台式机 (≥1200px)

• 超小型设备 Phones = col-xs-n
• 小型设备平板电脑 = col-sm-n
• 中型设备桌面 = col-md-n
• 大型设备桌面 = col-lg-n

如果您想在较小的视口(viewport)中并排显示 2 列，则需要将它们全部添加到同一行中:

<div class="row">
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item1</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item2</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item3</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item4</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item5</div>
  <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">Item6</div>
</div>

这将在较小的视口(viewport)中为您提供以下输出

Item 1 | Item 2
Item 3 | Item 4
Item 5 | Item 6