Wells are exceeding the row

Question

I'm trying to put 3 Wells in one row, like this

<div class="row" style="margin-top: 10px">

    <div class="span4 well">
        <h3 class="centralizado"><img src="/assets/temple.png" />
            <a href="<%= ministerios_path %>" class="no-style">Ministérios</a>
        </h3>
        <p>Aqui vai um texto meio longo, mas eu acho que nao vai ultrapassar o well</p>
    </div>

    <div class="span4 well">
        <h3 class="centralizado"><img src="/assets/educacao.png" />
            <a href="<%= educacionais_path %>" class="no-style">Educaional</a>
        </h3>
        <p>Aqui vai um texto meio longo, mas eu acho que nao vai ultrapassar o well</p>
    </div>

    <div class="span4 well">
        <h3 class="centralizado"><img src="/assets/contato.png" />
            <a href="/contato" class="no-style">Contato</a>
        </h3>
        <p>Aqui vai um texto meio longo, mas eu acho que nao vai ultrapassar o well</p>
    </div>

</div>

But this is the output:

The 3 Wells should be in the same row. I'm using container, not container-fluid.

This is the customized css:

.well{
    background-color: white !important;
}

* {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

Probably not enought place for third div. – Kasyx Apr 19 '13 at 14:23 — Kasyx, Apr 19 '13 at 14:23

Jesse · Accepted Answer · 2013-04-19T14:44:13.503

3

This happens because the Well style adds extra padding and margins which are not taken into account by the spans. Here's a working jsFiddle.

The easiest solution is to add box-sizing model:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Here's good info on the box-sizing model.

Edit: Tested in Firefox, Chrome, IE 8, 9 and 10

edited Apr 19 '13 at 14:44

answered Apr 19 '13 at 14:25

Jesse

8,605
7
47
57

1

@soyuka Yes sir, tested on IE8, 9 and 10. – Jesse Apr 19 '13 at 14:28
I'm on OSx and can't test on IE, but when I deploy, I will know it :) – Luiz E. Apr 19 '13 at 14:28
Make sure you do testing on your end, and come back if it doesn't work for you. – Jesse Apr 19 '13 at 15:09

score 2 · Answer 2 · answered Apr 19 '13 at 14:23

Just set another div inside the span :

<div class="row" style="margin-top: 10px">
    <div class="span4">
        <div class="well">
            <h3 class="centralizado"><img src="/assets/temple.png" />
                <a href="<%= ministerios_path %>" class="no-style">Ministérios</a>
            </h3>
            <p>Aqui vai um texto meio longo, mas eu acho que nao vai ultrapassar o well</p>
        </div>
    </div>

    <!-- etc -->
</div>

As you can see in the bootstrap.css, the well class has it's own border and padding which makes the div.span4 to take more width than it should.

Wells are exceeding the row

2 Answers2