Javascript Bootsrap Begineer-使用不同的屏幕大小更改div的宽度

我是一个初学者引导。我正在努力实现以下目标：

在中型和大型视口中创建宽度为2列的div，在超小型视口中创建宽度为12列的div

我知道引导程序在行和列（12）中工作，列有断点，在断点处它们“断开”和堆栈，以及在屏幕大小改变时如何应用。因此，我不知道如何像上面那样更改div的宽度

这可以通过使用引导来实现吗

---

我认为实现这一点的方法是使用javascript获得屏幕大小（像素宽度），然后更改div的宽度值。该方法是什么？任何线索或建议都会有帮助

您可以轻松做到这一点，如下所示：

<div class="col-xs-12 col-md-2"></div>

就这么简单。在

md

断点（970px）及以上，

div

将占据2列；在此之前，它将占用12个，但您可以将

col-xs-12

更改为您想要的任何数字

---

bootstrap网格系统很容易掌握窍门，您不需要javascript就可以使用它

您可以轻松做到这一点，如下所示：

<div class="col-xs-12 col-md-2"></div>

就这么简单。在

md

断点（970px）及以上，

div

将占据2列；在此之前，它将占用12个，但您可以将

col-xs-12

更改为您想要的任何数字

---

bootstrap网格系统很容易掌握窍门，您不需要javascript就可以使用它

不，您不需要js，因为引导网格系统就足够了。 您应该查阅这些文档以详细了解网格系统--

示例

.col-lg-2、.col-md-2、.col-xs-12
{
背景色：蓝色；高度：500px；
}

---

不，您不需要js，引导网格系统就足够了。 您应该查阅这些文档以详细了解网格系统--

示例

.col-lg-2、.col-md-2、.col-xs-12
{
背景色：蓝色；高度：500px；
}

---

您只需根据视口宽度添加更多类：

<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>

---

您只需根据视口宽度添加更多类：

<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>