Div bootstrap misaligned

Question

Div bootstrap misaligned

Asked 7 years, 5 months ago

Viewed 858 times

0

I have the following DIV

<section id="section-base">
    <div class="container">
        <h3>cases</h3>
        <div class="row">
            <?php foreach($cases as $valor){ ?>
                <div class="col-md-3">
                    <img src="<?php echo base_url("inicial/wide_image/".$valor->imagem.'/250/200'); ?>" style="padding:5px;" class='img-responsive'>
                    <div class="row text-justify">
                        <h4><?php echo $valor->titulo; ?></h4>
                        <p><?php echo $valor->descricao; ?></p>
                    </div>
                </div>
            <?php } ?>          
        </div>
    </div>
</section>

But when printing Ivs, they are misaligned:

How can I adjust? I would like to place an edge on each of the Divs as well.

They are display:inline-block ?

– Diego Souza

2017/01/26 at 15:45
If it’s put a vertical-align: top in them and already was.

– Diego Souza

2017/01/26 at 15:46
if you want to leave them all the same size and/or aligned perfectly, I suggest taking a look at the css-Tricks on the display:flex (https://css-tricks.com/snippets/css/a-guide-to-flexbox/). In response to the edge, take the class of elements, and add one border: [none~9999+ px] [solid,dashed,inset,outset, etc..] [color (hex,rgb,rgba,etc...)]

– Murilo Melo

2017/01/26 at 15:51
@Inkeliz, he may not be using bootstrap, so it is not possible to consider a duplicate hypothesis. :/

– Murilo Melo

2017/01/26 at 15:53
1

@Murilogambôa Pelo col-md-3 and row I think it’s Bootstrap and the same alignment problem. I think that your solution also gave an answer to that and the other question as well.

– Inkeliz

2017/01/26 at 15:54
Put the same height on all.

– Antonio Alexandre

2017/01/26 at 15:55
@Antonioalexandre, if he set a height, may occur a div need more height, set this as something fixed is bad :/

– Murilo Melo

2017/01/26 at 15:56
Apparently, PHP is generating more than 4 Divs with col-md-3 (by the image seem to be 6), this is leaving misaligned, since the limit is 12 (4 columns of size 3), two of the columns are thrown down.

– Pliavi

2017/01/26 at 16:08
If layout problem would be better you post the generated HTML code using the browser developer tool..

– Andre Figueiredo

2017/01/26 at 16:10
Exactly, @pliavi, the bootstrap columns have float defined in CSS and since the Divs defined in PHP have different heights, the latter two will be misaligned. I believe that the ideal would be to define a div with the Row class div classe="row" every 4 printed elements (or control the height of the elements leaving it fixed, which is a little complicated when it comes to dynamic content).

– Woss

2017/01/26 at 16:15
1

@Murilogambôa, you’re right. Height is not the best solution. It would be better to include in line Ivs, but then you need to limit the amount of blocks per line so Ivs don’t climb on top of each other as is happening.

– Antonio Alexandre

2017/01/26 at 17:43
@Guilhermenascimento this is bootstrap

– Sr. André Baill

2017/01/26 at 18:36
http://www.mkweb.inf.br/site/cases

– Sr. André Baill

2017/01/26 at 18:44
Yes are 4 columns.

– Sr. André Baill

2017/01/26 at 18:51
@Andrébaill corrected the answer http://answall.com/a/180194/3635

– Guilherme Nascimento

2017/01/26 at 19:22
Please avoid long discussions in the comments; your talk was moved to the chat

– Maniero

2017/01/26 at 19:32

Show 11 more comments

2 answers

3

He’s not breaking it you’re wearing col-md- wrong, if you do this (your code):

<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>
<div class="col-md-3">...</div>

It is logical that it will exceed the width and break, out that col-md uses float, ie it will try to fit under the element of lower height.

It’s like I explained here:

Prevent line breaking (encavalating) in col-Md bootstrap

Your grid count is wrong, even if you use the .row, the .col-*-3 should have only 4 Divs in one .row, that is to each .row you must only have 4 .col-md-3 for example.

To know if the quantity always adds up the values of the end of the col-, ends in -3 so it is 3, then you must have 4 Therefore the total should always be 12, ie:

If you’re just gonna use .col-*-3 then 4, for 3+3+3+3 = 12
If you’re just gonna use .col-*-4 then it will be 3, because 4+4+4 = 12
Use .col-*-6 will be 6+6=12
You can also do 6+3+3=12 for example.

To solve with loop, foreach, for or while, can do so using $i % 4:

<div class="container">
    <h3>cases</h3>

    <?php $i = 0; ?>
    <?php foreach($cases as $valor){ ?>
    <?php
    $needarow = !($i % 4);
    $i++;//Deve vir depois
    ?>
    <?php if ($needarow) { ?>
    <?php if ($i > 1) { ?>

    </div> <!-- //fecha .row -->

    <?php } ?>

    <div class="row">

    <?php }?>

        <div class="col-md-3">
            <img src="<?php echo base_url("inicial/wide_image/".$valor->imagem.'/250/200'); ?>" style="padding:5px;" class='img-responsive'>
            <div class="row text-justify">
                <h4><?php echo $valor->titulo; ?></h4>
                <p><?php echo $valor->descricao; ?></p>
            </div>
        </div>

    <?php } ?>

    </div> <!-- //ultimo .row -->

</div> <!-- //fecha .container -->

Browser other questions tagged css bootstrap

You are not signed in. Login or sign up in order to post.

by Antonio Alexandre • **3,281** points · Answer 1 · 2017-01-26T18:12:59+00:00

This problem of Divs climbing on top of each other is usually recurrent, not just with Bootstrap.

Understand the problem here: Normally you have Ivs of several different heights being placed next to each other. It turns out that when the browser renders the same it is generated to the right of the last block and then relocated to the left with the float, getting stuck in the block with a slightly larger height.

Below is an example of code demonstrating the problem. Note that the EEA, FFF, GGG and HHH blocks are allocated to each other’s sides but getting stuck on the right side because of the height of the BBB block.

<!DOCTYPE html>
<html>
<head>
	<title>Colunas</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>
		section { width:800px; margin:auto; border:1px solid #ccc; }
		div { width:180px; background-color:#f1d; margin:5px; padding:5px;  float:left; }
	</style>

</head>
<body>

	<section>
	
		<div>AAA AAA AAA<br> AAA AAA<br>  AAA</div>
		<div>BBB BBB BBB <br> BBB <br> BBB BBB  <br> BBB <br> BBB BBB  <br> BBB BBB </div>
		<div>CCC CCC<br> CCC CCC CCC<br> CCC</div>
		<div>DDD DDD<br> DDD<br> DDD DDD</div>
		
		<div>EEE</div>
		<div>FFF</div>
		<div>GGG</div>
		<div>HHH</div>
		
		<br clear="both">
	
	</section>


</body>
</html>

I have two suggestions to solve the problem:

1st option) Set fixed height for blocks. This is not very good if you have heights varying a lot and always. If the time is not too varied and you don’t run the risk of having the contents of one of them exceeding that time, this is a good option. Below is an example.

<!DOCTYPE html>
<html>
<head>
	<title>Colunas</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>
		section { width:800px; margin:auto; border:1px solid #ccc; }
		div { width:180px; height:150px; background-color:#f1d; margin:5px; padding:5px;  float:left; }
	</style>

</head>
<body>

	<section>
	
		<div>AAA AAA AAA<br> AAA AAA<br>  AAA</div>
		<div>BBB BBB BBB <br> BBB <br> BBB BBB  <br> BBB <br> BBB BBB  <br> BBB BBB </div>
		<div>CCC CCC<br> CCC CCC CCC<br> CCC</div>
		<div>DDD DDD<br> DDD<br> DDD DDD</div>
		
		<div>EEE</div>
		<div>FFF</div>
		<div>GGG</div>
		<div>HHH</div>
		
		<br clear="both">
	
	</section>


</body>
</html>

2nd option) Put the blocks in Divs "line". If the amount of your items per line is always the same, regardless of the resolution, this is the best solution. Follow an example using lines below.

<!DOCTYPE html>
<html>
<head>
	<title>Colunas</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style>
		section { width:800px; margin:auto; border:1px solid #ccc; }
		div { width:180px; background-color:#f1d; margin:5px; padding:5px;  float:left; }
		.linha { width:800px; background-color:#ffc; padding:0; margin:0; float:left; }
	</style>

</head>
<body>

	<section>
	
		<div class="linha">
			<div>AAA AAA AAA<br> AAA AAA<br>  AAA</div>
			<div>BBB BBB BBB <br> BBB <br> BBB BBB  <br> BBB <br> BBB BBB  <br> BBB BBB </div>
			<div>CCC CCC<br> CCC CCC CCC<br> CCC</div>
			<div>DDD DDD<br> DDD<br> DDD DDD</div>
		</div>

		<div class="linha">
			<div>EEE</div>
			<div>FFF</div>
			<div>GGG</div>
			<div>HHH</div>
		</div>

		<br clear="both">
	</section>


</body>
</html>