Polsterung In bootstrap

Im mit 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 rechts um die Kante des grauen hintergrund. Ich möchte einige padding, aber wenn ich es in der Bild-Spanne geht in die nächste Zeile.

Irgendwelche Ideen, wo ich bin mache ich falsch?

InformationsquelleAutor panthro | 2013-04-21

  1. 19

    Habe ich nicht verwendet Bootstrap, aber ich arbeitete auf Zurb Foundation. Auf, die ich verwendet, um add-Raum wie diesem.

    <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: Aufrechnung Spalten.

    Ich glaube, ich weiß, was Sie falsch machen. Wenn Sie die Anwendung Polsterung an der span6 wie diese:

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

    Ist es falsch. Was Sie tun müssen ist, fügen Sie die Polsterung, um die Elemente im inneren:

    <div class="span6">
    <h2 style="padding-left:5px;">Welcome</h2>
    <p  style="padding-left:5px;">Hello and welcome to my website.</p>
</div>
    Cheers aber das ist nicht das, was im nach.
    überprüfen Sie bitte mein edit.
    Offset-Klasse wird verwendet, um die Verschiebung Spalten nicht hinzufügen Polsterung an der inneren Elemente in dieser Spalte
    Lange Geschichte kurz: ich hatte nicht richtig gelesen die Frage (ich hatte eine andere agenda). Sie sind richtig, und die Logik in der Antwort hält immer noch.

    InformationsquelleAutor Dawood Awan

  2. 3

    Den Vorschlag von @Dawud ist gut, wenn die, die für Sie arbeitet.

    Wenn du mehr brauchst fine-tuning als das, eine Möglichkeit ist die Verwendung Polsterung auf der text-Elemente, hier ein Beispiel: http://jsfiddle.net/panchroma/FtBwe/

    CSS

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

    InformationsquelleAutor David Taiaroa

  3. 1

    Gibt es Polsterung gebaut in verschiedenen Klassen.

    Beispiel:

    A asp.net web forms app: 

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

    dieser obige code würde den Text von "Gelöschte Anzeigen" zu schließen, um die Einstellung zu dem, was ich sehe, zu nett, zu betrachten.

    Jedoch mit bootstrap 

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

    Dieser erstellt den Raum, wenn Sie nicht möchten, dass der text Fett, das Klasse=checkbox

    Bootstrap ist sehr flexibel, so dass in diesem Fall brauche ich nicht ein hack, aber manchmal müssen Sie.

    InformationsquelleAutor Tom Stickel

Schreibe einen Kommentar