Div misaligned bootstrap [duplicate]

Navigation
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 it comes to printing the divs, they are misaligned:

How can I adjust? I would like to put a border also in each of the divs.

    
asked by anonymous 26.01.2017 / 16:44

2 answers

3

It is not breaking, you are using 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>

Of course, it will exceed the width and break, except that col-md uses float , ie it will try to settle below the element of lesser height.

It's as I explained here:

Your amount of grids is wrong, even if you use .row , .col-*-3 should have only 4 divs in a .row , ie for each .row you should only have 4 .col-md-3 for example.

To know if the quantity always sums the values of the end of col- , if it ends in -3 then it is 3 , then it must have 4 divs, since the total must always be 12, that is: / p>

  • If you only use .col-*-3 then it will be 4, because 3 + 3 + 3 + 3 = 12
  • If you only use .col-*-4 then it will be 3, because 4 + 4 + 4 = 12
  • If you use .col-*-6 it will be 6 + 6 = 12
  • You can also do 6 + 3 + 3 = 12 for example.

To solve with loop, foreach , for or while , you can do this 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 -->
    
26.01.2017 / 19:56
2

This problem of divs creeping on top of each other is often recurring, not just Bootstrap.

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

Below is an example code demonstrating the problem. Notice that the blocks EEE, FFF, GGG and HHH are being 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 for solving the problem:

1st option) Set fixed height for the blocks. This is not very good if you have varying heights and always. If the height does not vary too much and you do not run the risk of having the content of one of them exceeding that height, this is a good option. Here's an example 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; 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 "line" divs. If the amount of your items per line is always the same regardless of resolution, this is the best solution. Here's 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>
    
26.01.2017 / 19:12
Insert PHP in Javascript [closed] Animation when modifying LinearLayout height