I have an issue about bootstrap rows. When the length of text is different in each grid "box", the space on the line under gets empty, and pushes the next box to the left. This is a bit difficult to explain, but check out my website to understand what I mean. It is in Norwegian, but I think you will get the point: http://speedcubing.no/example/PLL.html
As you see, there is many empty "holes" in the grid.
Any CSS property to fix this?
HTML:
<div class="row">
<div class="col-md-4 col-sm-6">
<h3>A-perm (a)</h3>
<img src="http://cube.crider.co.uk/visualcube.php?fmt=png&bg=t&size=510&view=plan&case=x R' U R' D2 R U' R' D2 R2 x'&arw=U0U2,U2U8,U8U0">
<p>x R' U R' D2 R U' R' D2 R2</p>
</div>
</div>
Obviously with a lot more .col-md-4 divs..
CSS:
.col-md-4 {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.col-md-4 p{
font-size: 30px;
}
A very simple solution would be to do this, the div's that don't have two lines of text add a break tag <br> at the end.
The 9th child div inside of row is where the grid start to add gaps for me, a simple solution would be this...
Example:
<p>M2' U' M2' U2' M2' U' M2'<br></p>
This will ensure that each child div is the same height making the grid fluid. Alternatively you could add a fixed height to each child div.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments