引导程序中自适应行类中的基本居中元素
Maa*_*aay 17 html css css3 twitter-bootstrap twitter-bootstrap-3
在我的页面上,我有很多元素,我需要连续几列直列显示.每个元素都是相同大小的图像.当您单击它时,在它的位置会出现图标菜单,其中包含三个项目.所有元素应水平和垂直居中.
可能会有不同数量的大图像(6,7,8或更多),所以我想将它们添加到一个行级中.
现在,我认为我正在通过引导程序文档完成所有工作,但页面钢上的元素逻辑似乎已被破坏.
我究竟做错了什么？
<body>
<div class="container-fluid wrapper">
<div class="row center-block text-center">
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row-fluid center-block text-center pagination-centered">
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
<div class="col-md-4 center-block text-center pagination-centered link">
<a target="_blank" href="#"><img src="http://img.leprosorium.com/2474848"></a>
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
<div class="center-block col-xs-6 col-sm-4 col-md-3 col-lg-2">
<div class="row center-block">
<div class="col-md-12 center-block">
<img src="http://img.leprosorium.com/2474872">
</div>
</div>
</div>
</div>
</div>
</body>
我得到的截图:
我需要的屏幕截图:
请指出我正确的方向.先感谢您.我能够在没有bootstrap的情况下完成它,b我希望它只能通过正确使用bootstrap和元素来完成,因为我想保存自适应布局.
UPD @LegendaryAks使用<div class="clearfix"></div>after icons元素修复了间隙问题,但是自适应布局的所有元素居中以及总元素数量未知的问题仍然存在.
UPD2最后只对一个元素进行居中是不够的,因为我们需要知道如何在最后一行中从一个元素到最大数量的元素居中,播种我们可以加载页面上的所有元素而不用担心最后一行定心.
使用col-md-12而不是col-md-6在设计的最后一个元素。尝试这个：
<div class="col-md-12 center-block text-center pagination-centered link">
<a target="_blank" href="#">VK</a>
</div>
和
<div class="col-md-12 center-block text-center pagination-centered link">
<a target="_blank" href="#">FB</a>
</div>
对于垂直对齐使用创建一个新类
.verticalcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
并使用它。让你的 HTML 结构如下：
First Row..
<div class="row center-block text-center">
<div class="center-block col-md-4">
</div>
<div class="center-block col-md-4">
</div>
<div class="center-block col-md-4">
</div>
</div>
Second Row..
<div class="row center-block text-center">
<div class="center-block col-md-4">
</div>
<div class="center-block col-md-4">
</div>
<div class="center-block col-md-4">
</div>
</div>
| 归档时间： |
|
| 查看次数： |
1018 次 |
| 最近记录： |