威尔斯超越了这一排

Question

我正试图将3个Wells放在一行，就像这样

<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>

但这是输出：

3井应该在同一排。我使用的是container，而不是container-fluid。

这是自定义的css：

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

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

Answer 1

这是因为Well样式添加了span未考虑的额外填充和边距。这是一个有效的jsFiddle。

最简单的解决方案是添加盒子大小模型：

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

在盒子大小模型上

Here's good info。

---

修改：在Firefox，Chrome，IE 8，9和10

中进行了测试

Answer 2

只需在范围内设置另一个div：

<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>

正如您在bootstrap.css中看到的那样，well类拥有自己的border和padding，这使得div.span4占用的宽度超过{{1}}应该。