Menu
On my page I have lots of elements, which I need to show by several in a row in straight columns. Each element is an image of equal size. When you click on it, on it's place appears icon menu with three items in a row. All elements should be centred horizontally and vertically.
There could be a different number of big images (6, 7, 8 or more) so I want to add them in one row-class.
Now, I think I'm doing everything by bootstrap documentation, but elements logic on the page steel appears to be broken.
What am I doing wrong?
Codepen example
<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>
Screenshot of what I get:
Screenshot of what I need:
Please point me in the right direction. Thank you in advance. I was able to done it without bootstrap, b I hope it could be done only by the right usage of bootstrap and elements, because I want to save the adaptive layout.
UPD @LegendaryAks fixed the problem with gap by using <div class="clearfix"></div> after icons element, but problem of centering all elements for the adaptive layout and unknown number of total elements is still open.
UPD2 Centering just one element in the end is not enough, because we need to know how to center from one to max number of elements on the last row, sow that we could load all the elements on a page with no worry for the last row centering.
965
There you go i think this did the trick . You can check the demo at http://codepen.io/anon/pen/QybXQJ?editors=100
What i did is I added a div with class clearfix after the fourth div. I hope this is what you are looking for
<div class="clearfix"></div>
there the solution using only css:
.center-block-big:nth-child(4n+1) {
clear: left;
}
.center-block-big:last-child {
margin: 0 auto;
float: none;
}
the only thing is that in this example i have removed the col-lg-2 to apply it to all resolution, and edited the class name to only apply to the container of the big images and not the twitter ones.
updated codepen
If you want mantain the space on lg resolution you need to play with the col width a bit in this way:
updated codepen
If you have dynamic elements you can use this to make that only if one element is on a row it will be centered:
.center-block-big:nth-child(4n+1) {
clear: left;
}
.center-block-big:last-child:not(:nth-child(5n)) {
margin: 0 auto;
float: none;
}
.center-block-big:nth-child(4n+2),
.center-block-big:nth-child(4n+3),
.center-block-big:nth-child(4n) {
float: left!important;
}
updated codepen, add .center-block-big elements to see the effect
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With