11

ブートストラップを使用しています：

<div id="main" class="container" role="main">
<div class="row">
    <div class="span6">
        <h2>Welcome</h2>
        <p>Hello and welcome to my website.</p>
    </div>
    <div class="span6">
        Image Here (TODO)
    </div>
</div>

メインもグレーの背景です。ページの背景は白です。私が抱えている問題は、テキストが灰色の背景の端にあることです。パディングが必要ですが、追加すると、画像スパンが次の行に移動します。

私が間違っているアイデアはありますか？

4

3 に答える 3

19

Bootstrap は使用していませんが、Zurb Foundation に取り組みました。その上に、このようにスペースを追加していました。

<div id="main" class="container" role="main">
    <div class="row">

        <div class="span5 offset1">
            <h2>Welcome</h2>
            <p>Hello and welcome to my website.</p>
        </div>
        <div class="span6">
            Image Here (TODO)
        </div>
    </div>

このリンクにアクセスしてください: http://getbootstrap.com/2.3.2/scaffolding.htmlセクションを読んでください: 列のオフセット。

私はあなたが間違っていることを知っていると思います。次のようにパディングを適用する場合span6:

<div class="span6" style="padding-left:5px;">
    <h2>Welcome</h2>
    <p>Hello and welcome to my website.</p>
</div>

違います。あなたがしなければならないことは、内部の要素にパディングを追加することです:

<div class="span6">
    <h2 style="padding-left:5px;">Welcome</h2>
    <p  style="padding-left:5px;">Hello and welcome to my website.</p>
</div>
于 2013-04-21T17:36:41.473 に答える