it-swarm.com.de

Polsterung im Bootstrap

Ich benutze 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 hat auch einen grauen Hintergrund. Der Hintergrund der Seite ist weiß. Das Problem, das ich habe, ist, dass der Text bis zum Rand des grauen Hintergrunds passt. Ich möchte etwas aufgefüllt werden, aber wenn ich es hinzufüge, geht die Bildspanne zur nächsten Zeile.

Irgendwelche Ideen wo ich falsch liege?

11
panthro

Ich habe Bootstrap nicht benutzt, aber an der Zurb Foundation gearbeitet. Daraufhin habe ich so Platz hinzugefügt.

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

Besuchen Sie diesen Link: http://getbootstrap.com/2.3.2/scaffolding.html und lesen Sie den Abschnitt: Versetzen von Spalten.

Ich glaube, ich weiß, was du falsch machst. Wenn Sie Padding wie folgt auf den span6 anwenden:

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

Es ist falsch. Was Sie tun müssen, ist den Elementen im Inneren eine Auffüllung hinzuzufügen:

<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

Der Vorschlag von @Dawood ist gut, wenn das für Sie funktioniert. 

Wenn Sie mehr Feinabstimmung als das benötigen, können Sie die Textelemente mit einer Auffüllung versehen. Hier ein Beispiel: http://jsfiddle.net/panchroma/FtBwe/

CSS

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

Es gibt Padding in verschiedenen Klassen.

Zum Beispiel:

Eine asp.net Web Forms App: 

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

dieser Code würde den Text von "Gelöschte Anzeigen" zu nahe an das Kontrollkästchen setzen, um das anzuzeigen, was ich in Nizza sehe.

Allerdings mit Bootstrap 

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

Dadurch wurde der Speicherplatz erstellt, wenn der Text nicht fett dargestellt werden soll, das Kontrollkästchen class = 

Bootstrap ist sehr flexibel. In diesem Fall brauche ich keinen Hack, aber manchmal muss man das tun.

1
Tom Stickel