大佬教程收集整理的这篇文章主要介绍了css – 如何使用引导程序调整每行的列数,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
1)我希望瓷砖垂直和水平对齐,如果使用<表>顶部和左侧对齐的标签.我的照片尺寸相同,但字幕长度不一.
2)列数根据屏幕大小进行调整.在小屏幕上,我们将有2列12行.在中等屏幕上3列4行.在大屏幕上4列和3行.
我尝试了@L_674_0@,这几乎是我需要的,除了砖石外观.我希望它们也按行排列.
我也尝试了使用COl-sm-6,col-md-4和col-lg-3的Grid Options,但问题在于我需要在标签中包装固定数量的瓦片< div class =“row”>.
在以前版本的Bootstrap中也存在此问题,但如果有针对v4的特定解决方案,我也想知道.
现在,至于您的另一个问题:您不需要确保每个屏幕大小的每行中只有12列.如果列不再适合(例如,你有.col – * – 11然后.col – * – 2),它将自动转到下一行,即使前一行不是100%已满.
另一个例子来自Bootstrap’s documentation
<div class="row"> <div class="col-9">.col-9</div> <div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12,this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-6">.col-6<br>Subsequent columns conTinue along the new line.</div> </div>
这里.col-4将引入第10-13列,但由于只有12列,所以整个div进入下一行.
Bootstrap 4
I made a fiddle向您展示,这将如何在Bootstrap 4中工作.v4的网格系统基于flexbox,在flexbox中,项目将增长到使用所有可用的垂直空间.这意味着在一行列中,每列将与最高列一样高.
这与Bootstrap 3有很大不同,意味着无需补偿内容的不同高度.
Bootstrap 3
我最初的答案基于Bootstrap 3并且存在一些差异,所以我会在这里保留原始答案(略微修改)以及任何需要它的人.
在Bootstrap 3中,您可以完全省略.row并使用.container作为所有.col – * – *的父级.
您可以查看this fiddle以查看使用.row和不使用.row来布局图像网格之间的区别.只需调整结果框的宽度,向下滚动即可查看连续3个图像时的差异.当然,您也可以使用一个.row将所有.cols放入其中.
补偿不同的内容高度
但是,由于Bootstrap 3使用浮点数而不是flexbox,这会引入一个问题,即如果列的高度不同,当您希望它从左侧开始时,下一列可能会从上一列的最高元素的右侧开始的屏幕.因此,为了将元素推到所有先前元素下方,您需要清除这些浮点数.
Bootstrap 3为此提供了一个类,您只需插入< div class =“clearfix”>每当你想要清除浮子.此外,您必须隐藏屏幕大小的div,您不想清除浮动,您可以使用类.hidden- *来实现.
<div class="container"> <div class="col-sm-6 col-md-4 col-lg-3"> </div> <div class="col-sm-6 col-md-4 col-lg-3"> </div> <!-- on small devices the first row is full here,so we add a clearfix and hide it for medium and large sizes --> <div class="clearfix hidden-md hidden-lg"></div> <div class="col-sm-6 col-md-4 col-lg-3"> </div> <!-- on medium devices the first row is full here,so we add a clearfix and hide it for small and large sizes --> <div class="clearfix hidden-sm hidden-lg"></div> <div class="col-sm-6 col-md-4 col-lg-3"> </div> </div>
我再次制作了一个fiddle来展示整个过程.
以上是大佬教程为你收集整理的css – 如何使用引导程序调整每行的列数全部内容,希望文章能够帮你解决css – 如何使用引导程序调整每行的列数所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。