1

我正在尝试将 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;
}
4

2 回答 2

3

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

最简单的解决方案是添加 box-sizing 模型：

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

这是有关 box-sizing 模型的好信息。

编辑：在Firefox、Chrome、IE 8、9和10中测试

于 2013-04-19T14:25:03.457 回答
2

只需在 span 内设置另一个 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占用的宽度超出了它应有的宽度。

于 2013-04-19T14:23:50.700 回答