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

-1

我是Bootstrap的初学者。我试图完成以下操作：Bootsrap Begineer - 用不同屏幕尺寸更改div的宽度

要在中等和大型视口上生成2列宽的div和在超小型视口上生成12列。

我知道引导程序在行和列中工作（12），并且列在屏幕大小发生变化时具有断点和堆栈。因此，我不知道如何更改上面的div的宽度。

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

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

来源

2017-03-08 Arihant

您可以轻松地做到这一点，就像这样：

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

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

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

来源

2017-03-08 02:52:51 justinw

不，你不需要js的引导程序网格系统就足够了。您应该咨询这些文档来了解网格系统中details--

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>

来源

2017-03-08 02:57:26 neophyte

您可以根据视口宽度简单地添加更多的类：

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

超小型设备手机（< 768px）小型设备片剂（≥768px）介质设备桌面（≥992px）大型设备桌面（≥1200px）

超小型器件电话= 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

以下输出

来源

2017-03-08 03:05:37

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

回答

相关问题