- 首页
- 其他开发
- 如何在调整大小时更改一行中的列数 - Bootstrap
如何在调整大小时更改一行中的列数 - Bootstrap
[英] How to change number of column in a row on resize - Bootstrap
本文介绍了如何在调整大小时更改一行中的列数 - Bootstrap的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在调整窗口大小时，我需要一些帮助来动态更改行中的列数.比如大中屏应该是3列，小应该是2列，超小应该是1列
类似的东西
大中型
{col-1}{col-2}{col-3}
{col-4}{col-5}{col-6}
对于小
{col-1}{col-2}
{col-3}{col-4}
{col-5}{col-6}
和类似的超小
我现在所做的是一行并在其中放入 3 列
<div class="col-lg-4 col-sm-6 col-xs-12">第 1 列的一些内容
<div class="col-lg-4 col-sm-6 col-xs-12">第 2 列的一些内容
<div class="col-lg-4 col-sm-6 col-xs-12">此处为第 3 列的一些内容
<div class="row"><div class="col-lg-4 col-sm-6 col-xs-12">第 4 列的一些内容
<div class="col-lg-4 col-sm-6 col-xs-12">此处为第 5 列的一些内容
<div class="col-lg-4 col-sm-6 col-xs-12">此处为第 6 列的一些内容
但是使用这个技巧，在小屏幕上它会连续显示 2 列，而在下一行仅显示 1 列
{col-1}{col-2}
{col-3}
{col-4}{col-5}
{col-6}
谁能帮我解决这个问题.
谢谢
解决方案
这是一个很好的例子，说明何时使用 Bootstrap 的 列换行.
将所有列放入 1 .row...
http://www.codeply.com/go/zyTOcNXo0m
<div class="col-lg-4 col-sm-6 col-xs-12">第 1 列的一些内容
<div class="col-lg-4 col-sm-6 col-xs-12">第 2 列的一些内容
<div class="col-lg-4 col-sm-6 col-xs-12">此处为第 3 列的一些内容
<div class="col-lg-4 col-sm-6 col-xs-12">第 4 列的一些内容
<div class="col-lg-4 col-sm-6 col-xs-12">此处为第 5 列的一些内容
<div class="col-lg-4 col-sm-6 col-xs-12">此处为第 6 列的一些内容
http://www.codeply.com/go/zyTOcNXo0m
I need some help to change number of columns in a row dynanamically when resizing window. For example, for large and medium screen, there should be 3 columns in a row, for small there should be 2 and for extra small only 1 column
Something like this
For large and medium
{col-1}{col-2}{col-3}
{col-4}{col-5}{col-6}
For small
{col-1}{col-2}
{col-3}{col-4}
{col-5}{col-6}
and similar for extra small
What I have done now is made a row and put 3 columns in it
<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 1
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 2
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 3
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 4
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 5
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 6
</div>
</div>
but using this trick, on small screen it show 2 column in a row, and in next row just 1 column
{col-1}{col-2}
{col-3}
{col-4}{col-5}
{col-6}
Can anybody please help me to get this fixed.
Thanks
解决方案
This is a good example of when to use Bootstrap's column wrapping.
Put all of the columns in 1 .row...
http://www.codeply.com/go/zyTOcNXo0m
<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 1
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 2
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 3
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 4
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 5
</div>
<div class="col-lg-4 col-sm-6 col-xs-12">
Some content here for column 6
</div>
</div>
http://www.codeply.com/go/zyTOcNXo0m
这篇关于如何在调整大小时更改一行中的列数 - Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
