Wird Padding im Twitter Bootstrap Framework unterstützt?

Ich habe Schwierigkeiten zu verstehen, die Twittter-Bootstrap-framework. Ist die Möglichkeit für basic-Polsterung rund um die Container?

Scheint es ein Standard-20px margin-left aber keine Polsterung. Jemand hier es geschafft, dieses Problem zu lösen?

http://twitter.github.com/bootstrap/

Dies funktioniert gut, wenn Ihr hintergrund ist weiß, aber in dem moment Stelle ich eine Farbe hinter einem container, ich bekomme keine Polsterung und, wenn ich hinzufügen Polsterung, mein layout bricht. Mache ich etwas falsch?

InformationsquelleAutor der Frage Amit Erandole | 2011-10-25

  1. 4

    Inspiriert von stackoverflow.com/a/10779289

    .light {
  -moz-box-sizing: border-box;
  background: url(/img/background.png);
  padding: 1em;
}

    InformationsquelleAutor der Antwort Steven Penny

  2. 6

    Unter dem obigen Ansatz und Anwendung auf die Polsterung würde auch funktionieren.

    Fügen Sie eine Klasse namens .ist gepolstert, um die Spanne, die Sie wollen padd (in diesem Fall span4)

    <!-- Example row of columns -->
  <div class="row">
    <div class="span4 is-padded">
      <h2>Heading</h2>
       <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
  </div>

    Dann erstellen Sie CSS (oder weniger) reduziert die Breite des span-Tags durch die Polsterung, zum Beispiel:

    /* CSS example */
.span4.is-padded {
    width: 280px; /* 300 - (10x2) */
    padding: 10px;
    background: #CCC; /* just so you can see it */
}

/* Less example */
.span4.is-padded {
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth;
    padding: @gridGutterWidth/2;
    background: #CCC; /* just so you can see it */
}

    Dies kann leicht wiederholt werden, für den rest des Feldes

    .is-padded {
    padding: @gridGutterWidth/2;
    background: #CCC; /* just so you can see it */
}
.span1.is-padded {
    width: (@gridColumnWidth * 1) + (@gridGutterWidth * 0) - @gridGutterWidth;
}
.span2.is-padded {
    width: (@gridColumnWidth * 2) + (@gridGutterWidth * 1) - @gridGutterWidth;
}
.span3.is-padded {
    width: (@gridColumnWidth * 3) + (@gridGutterWidth * 2) - @gridGutterWidth;
}
.span4.is-padded {
    width: (@gridColumnWidth * 4) + (@gridGutterWidth * 3) - @gridGutterWidth;
}
... etc

    Den Breakpoints im responsive grids können einfach überschrieben werden, auch mithilfe von media queries.

    Dieser Ansatz wird nicht funktionieren, in der fluid-grids, obwohl.

    InformationsquelleAutor der Antwort Ben Edge

  3. 3

    Können Sie diesen die sitewidth in der .weniger Datei
    //Grid-system und Seite-Struktur

    also, wenn Sie wollen, hinzufügen von 20px auf jeder Seite des 940px (20px, ist die Standard-gridGutterWidth)
    Kommentar:

    @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

    und schreiben:

    @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1) + (@gridGutterWidth * 2));

    Abbrechen margin-left: -20px
    mit einer css-Regel:

    .row {margin-left: 0;}

    Aber wenn Sie verschachtelte Zeilen, die Sie benötigen, um eine Klasse, nur um die Zeilen, die Sie möchten Gedankenstrich.
    Erstellen Sie eine Regel:

    .indent {margin-left: 0;}

    Dann in <div class="row"> fügen Sie in einer Klasse <div class="row indent">

    InformationsquelleAutor der Antwort alius

Schreibe einen Kommentar