gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 16:06:11 26 4
gpt4 key购买 nike

我是 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 的宽度值。方法是什么?任何线索或建议都会有所帮助。

最佳答案

您可以根据视口(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

关于javascript - Bootstrap 初学者 - 改变不同屏幕尺寸的 div 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42662048/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com