Bootstrap Beginner - 用不同的屏幕尺寸改变 div 的宽度答案

【问题标题】：Bootsrap Begineer - change width of div with different screen sizeBootstrap Beginner - 用不同的屏幕尺寸改变 div 的宽度
【发布时间】：2017-03-08 02:46:21
【问题描述】：

我是 Bootstrap 的初学者。我正在尝试完成以下任务：

在中型和大型视口上制作 2 列宽的 div，在超小视口上制作 12 列宽。

我了解引导程序在行和列中工作 (12)，并且列具有断点，它们在这些断点处“中断”并堆叠，以及当屏幕尺寸发生变化时如何应用。因此，我不确定如何更改上述 div 的宽度。

这可以通过使用 Bootstrap 来完成吗？

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

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

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

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

就这么简单。在md断点（970px）及以上处，那div将占据2列；在此之前它将占用 12 个，但您可以将 col-xs-12 更改为您想要的任何数字。

引导网格系统很容易上手，而且您不需要 javascript 即可使用它。 Read about it here

【讨论】：

【解决方案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>

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

以上为您提供了 4 列用于较大视口的输出，3 用于中等视口，2 用于较小视口。

超小型设备手机 (

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

如果您希望在较小的视口中并排放置 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>

这将在较小的视口处为您提供以下输出

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

【讨论】：

【解决方案3】：

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

w3 schools

示例

.col-lg-2, .col-md-2, .col-xs-12
{
background-color: blue; height:500px;
}

<html>


<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

         
           </head>
<body >
  

  <div class="container">
  <div class="row">
  <div class="col-lg-2 col-md-2 col-xs-12">
    
  </div>
    
  </div>
</div>
  </body>  

</html>

【讨论】：