Rembourrage Dans Bootstrap

Im en utilisant bootstrap:

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

Principale dispose également d'un fond gris. Le fond de la page est blanche. Le problème que j'ai est que le texte est à droite sur le bord de l'arrière-plan gris. Je veux un peu de rembourrage, mais quand je l'ajoute dans l'image span va à la ligne suivante.

Des idées où je vais mal?

source d'informationauteur panthro

  1. 16

    Je n'ai pas utilisé Bootstrap, mais j'ai travaillé sur Zurb Foundation. Sur que j'ai utilisé pour ajouter de l'espace de ce genre.

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

    Visitez ce lien: http://getbootstrap.com/2.3.2/scaffolding.html et lisez la section: la Compensation des colonnes.

    Je pense que je sais ce que vous faites mal. Si vous faites une demande de rembourrage pour le span6 comme ceci:

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

    C'est mal. Ce que vous avez à faire est d'ajouter rembourrage pour les éléments à l'intérieur:

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

    La suggestion de @Dawood est bon si cela fonctionne pour vous.

    Si vous avez besoin de plus de peaufinage que cela, une option est d'utiliser un rembourrage sur les éléments de texte, voici un exemple: http://jsfiddle.net/panchroma/FtBwe/

    CSS

    p, h2 {
    padding-left:10px;
}
  3. 1

    Il y a un rembourrage intégré dans les différentes classes.

    Par exemple:

    Un asp.net formulaires web app: 

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

    le code ci-dessus serait de placer le Texte de "Montrer Supprimé" trop près de la case à cocher à ce que je vois à l'agréable à regarder.

    Cependant avec bootstrap 

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

    Cela a créé de l'espace, si vous ne voulez pas que le texte en gras, c'class=case

    Bootstrap est très souple, donc dans ce cas je n'ai pas besoin d'un hack, mais parfois vous avez besoin d'.