Question

我是Bootstrap的初学者。我想完成以下任务：

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

我知道bootstrap在行和列（12）中工作，并且列具有断点，在这些断点处它们会断开＆＃39;并在屏幕尺寸变化时叠加as和如何应用。因此我不知道如何更改div的宽度如上所述。

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

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

Answer 1

您可以轻松地执行此操作，如下所示：

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

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

引导网格系统很容易掌握，你不需要使用javascript来使用它。 Read about it here

Answer 2

不，你不需要js的那个bootstrap网格系统就足够了。您应该参考这些文档来详细了解网格系统 -

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>

Answer 3

您可以根据视口宽度添加更多类：

<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为小型输出。

超小型设备电话（＆lt; 768px）小型设备平板电脑（≥768px）中型设备台式机（≥992px）大型设备台式机（≥1200px）

超小型设备电话= col-xs-n
小型设备平板电脑= col-sm-n
中型设备桌面= col-md-n
大型设备Desktops = 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

Bootsrap Begineer - 使用不同的屏幕尺寸更改div的宽度

3 个答案: