web-dev-qa-db-fra.com

Rembourrage En bootstrap

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>

Main a également un fond gris. Le fond de la page est blanc. Le problème que je rencontre est que le texte est juste au bord du fond gris. Je veux un peu de rembourrage, mais lorsque je l'ajoute, la durée de l'image passe à la ligne suivante.

Des idées où je vais mal?

twitter-bootstraptwitter-bootstrap-2
11
panthro

Je n'ai pas utilisé Bootstrap mais j'ai travaillé sur Zurb Foundation. Sur ce j'ai l'habitude d'ajouter de l'espace comme ceci.

<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: Décalage des colonnes.

Je pense que je sais ce que tu fais mal. Si vous appliquez un remplissage au span6 comme ceci:

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

Il est faux. Ce que vous devez faire, c'est ajouter du rembourrage aux é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>
19
Dawood Awan

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

Si vous avez besoin de plus d'ajustements que cela, vous pouvez utiliser l'une des options suivantes: http://jsfiddle.net/panchroma/FtBwe/

CSS

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

Il existe des rembourrages intégrés dans différentes classes.

Par exemple:

Une application de formulaires Web asp.net: 

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

ce code ci-dessus placerait le texte de "Show Deleted" trop près de la case à cocher pour ce que je vois à Nice.

Cependant avec bootstrap 

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

Cela a créé l'espace, si vous ne voulez pas que le texte soit en gras, cette classe = case à cocher 

Bootstrap est très flexible, donc dans ce cas, je n'ai pas besoin de piratage, mais parfois vous en avez besoin.

1
Tom Stickel