1

このように、3つのウェルを一列に並べようとしています

<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です。

最も簡単な解決策は、ボックス サイジング モデルを追加することです。

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

ボックスサイジングモデルに関する良い情報があります。

編集: 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 に答える