web-dev-qa-db-ja.com

パディングインbootstrap

ブートストラップを使用しているIm：

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

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

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

twitter-bootstraptwitter-bootstrap-2
11
panthro

私は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>
19
Dawood Awan

@Dawoodからの提案は、もしそれがあなたにとってうまくいけば良いです。

それ以上の微調整が必​​要な場合、1つのオプションはテキスト要素にパディングを使用することです。以下に例を示します。 http://jsfiddle.net/panchroma/FtBwe/

[〜＃〜] css [〜＃〜]

p, h2 {
    padding-left:10px;
}
3
David Taiaroa

さまざまなクラスにパディングが組み込まれています。

例えば：

Asp.net Webフォームアプリ：

<asp:CheckBox ID="chkShowDeletedServers" runat="server" AutoPostBack="True" Text="Show Deleted" />

上記のこのコードは、「削除済みを表示」のテキストをチェックボックスの近くに配置して、ニースで見たいものに近づけます。

ただし、ブートストラップでは

<div class="checkbox-inline">
    <asp:CheckBox ID="chkShowDeletedServers" runat="server" AutoPostBack="True" Text="Show Deleted" />
</div>

これにより、スペースが作成されました。テキストを太字にしたくない場合は、そのclass = checkbox

ブートストラップは非常に柔軟なので、この場合、ハックは必要ありませんが、必要な場合もあります。

1
Tom Stickel