使用Bootstrap根据屏幕大小更改行中的Div元素数
[英]Change Number of Div Elements in Row Based on Screen Size with Bootstrap
问题描述
是否可以使用Bootstrap根据屏幕大小设置不同数量的<div>元素？
例如，桌面上每行4列。
+-----------+-----------+-----------+-----------+
| .col-md-3 | .col-md-3 | .col-md-3 | .col-md-3 |
+-----------+-----------+-----------+-----------+
| .col-md-3 | .col-md-3 | .col-md-3 | .col-md-3 |
+-----------+-----------+-----------+-----------+
然后，不是让每列在平板电脑和手机上都达到100％，而是在平板电脑上每行有3列。 将列超过12推到下一行，如下所示。
+-----------+-----------+-----------+
| .col-sm-4 | .col-sm-4 | .col-sm-4 |
+-----------+-----------+-----------+
| .col-sm-4 | .col-sm-4 | .col-sm-4 |
+-----------+-----------+-----------+
| .col-sm-4 | .col-sm-4 |
+-----------+-----------+
我找到了Bootstrap的响应式实用程序 ，我可以隐藏或显示某些屏幕大小的列。 这意味着我必须重复大量的列（参见下面的代码段），所以我希望有一个更清洁的解决方案。
<!DOCTYPE html> <html lang="en"> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <section class="container"> <div class="row"> <div class="col-md-3 col-sm-4"> <p>1</p> </div> <div class="col-md-3 col-sm-4"> <p>2</p> </div> <div class="col-md-3 col-sm-4"> <p>3</p> </div> <div class="col-md-3 hidden-sm"> <p>4</p> </div> </div> <div class="row"> <div class="hidden-md visible-sm-4"> <p>4</p> </div> <div class="col-md-3 col-sm-4"> <p>5</p> </div> <div class="col-md-3 col-sm-4"> <p>6</p> </div> <div class="col-md-3 hidden-sm"> <p>7</p> </div> <div class="col-md-3 hidden-sm"> <p>8</p> </div> </div> <div class="row"> <div class="hidden-md visible-sm-4"> <p>7</p> </div> <div class="hidden-md visible-sm-4"> <p>8</p> </div> </div> </section> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>
据我所知，你不能忽略包含.row div。 能够为所有元素放置class="col-md-3 col-sm-4 col-xs-6"会很高兴，然后让bootstrap占用多个<div>来加上12个。所以4个中型屏幕，3个小屏幕，2个超小型屏幕。
1 个解决方案
解决方案1
3 已采纳 2017-07-21 21:48:33
根据我在原始查询中的评论，这是对.row的误解。 根据Bootstrap文档：
如果在一行中放置超过12列，则每组额外列将作为一个单元包裹到新行上。
http://getbootstrap.com/css/#grid
您只需要在布局中提供各种断点，然后让Bootstrap处理其余的断点：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> <div class="col-xs-6 col-sm-4 col-lg-3"> <div class="well">1</div> </div> </div> </div>
我会注意到我在这里使用.well来显示完整的容器大小。 您可能希望将其替换为某些自定义包装器，这可能还需要额外的边距/填充代码。
Bootstrap网格，每列具有不同数量的元素，具体取决于屏幕大小
[英]Bootstrap grid with different number of elements per column depending on screen size
bootstrap - 在屏幕尺寸变化时将文本从一个 div 移动到另一个
[英]bootstrap - move text from one div into other on screen size change
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.