Grid System BootStrap

Navigation
2

I'm setting up this grid Bootstrap, but in the last row , it looks like the grid margin is misaligned. Is my semantics wrong? 

<divclass="container">
    <div class="row">
        <div class="col-xs-4">
            <img src="../img/5.png" width="100%" class="imagem-banner-destaque" />
        </div>
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-6">
                    <img src="../img/2.jpg" width="100%" class="imagem-banner" />
                </div>
                <div class="col-xs-6">
                    <h4>Lorem ipsun </h4><span>Lorem ipsun nore inv4camus munrá</span>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <img src="../img/4.jpg" width="100%" class="imagem-banner" />
                </div>
                <div class="col-xs-6">
                    <h4>Lorem ipsun </h4><span>Lorem ipsun nore inv4camus munrá</span>
                </div>
            </div>

        </div>
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-6">
                    <img src="../img/2.jpg" width="100%" class="imagem-banner" />
                </div>
                <div class="col-xs-6">
                    <h4>Lorem ipsun </h4><span>Lorem ipsun nore inv4camus munrá</span>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <img src="../img/4.jpg" width="100%" class="imagem-banner" />
                </div>
                <div class="col-xs-6">
                    <h4>Lorem ipsun </h4><span>Lorem ipsun nore inv4camus munrá</span>
                </div>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-xs-4">
            <h3>Testando o teste  !</h3>
            <span>Confira agora, todas as notícias</span>
        </div>
        <div class="col-xs-4">
            <div class="col-xs-6">
                    <img src="../img/6.jpg" width="100%" class="imagem-banner" />
                </div>
                <div class="col-xs-6 text-left">
                    <h4>Lorem ipsun </h4><span>Lorem ipsun nore inv4camus munrá</span>
                </div>
        </div>
        <div class="col-xs-4">
            <div class="col-xs-6">
                    <img src="../img/2.jpg" width="100%" class="imagem-banner" />
                </div>
                <div class="col-xs-6">
                    <h4>Lorem ipsun </h4><span>Lorem ipsun nore inv4camus munrá</span>
                </div>
        </div>

        </div>
    </div>
</div>
    
asked by anonymous 20.02.2015 / 12:39

1 answer

2

What I did was put a row in each image + text set of the last image bid: 

<div class="col-xs-4">
    <div class="row">     <!-- Adicionei esta div para juntar imagem e texto -->
        <div class="col-xs-6">

See here at jsfiddle

    
20.02.2015 / 14:51
Change the color of a box in the horizontal menu Edit records of a clientdataset of fields coming from a join