Grid System Bootstrap

Asked

Viewed 344 times

2

I’m riding this grid Bootstrap, but at last Row, it seems that the image gives a margin of the grid itself and is misaligned.. My semantics are wrong?

inserir a descrição da imagem aqui

<div class ="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>
html5 twitter-bootstrap grid

  • I think it’s because of that text-left there in the code. Try taking this...

  • taken, and still remains the same.. all cols are partitioned into 4, I do not know why this strange alignment of the image..

  • lack the <div class="row"> for the image and text, as it has in the others...

  • If I give another <div class="Row">, it will create another row, these 3 elements have to be in this Row, because they are the 3 columns in Row..

  • Have you tried it? Look, try it...

  • Man, that’s right, it was just implementing a Row inside the col-Xs-4, Vlwzão !

  • Michel puts there, in question, one of the images for me to test here...

  • the image is up there !

  • See here on jsfiddle working: http://jsfiddle.net/mkmwncqr/2/

Show 4 more comments

1 answer

2


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

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

See here on jsfiddle

  • 1

    perfect, worked right, thank you !

Browser other questions tagged html5 twitter-bootstrap grid

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