it-swarm.com.de

Warum hat die bootstrap .row Klasse einen Standardrand von -30px?

Wenn ich Boostrap mache, muss ich die Klasse "row" verwenden ...

Wenn Sie sich mein Testdesign ansehen:

enter image description here

Warum werde ich mit einem Rand von -30px gezwungen?

Mit diesem HTML würde ich erwarten, dass 3 Zeilen jede Spalte 33% der gesamten verfügbaren Breite teilen:

<div class="container">
    <div class="row">
        <div style="background-color: pink;" class="span4">
            This is a label
        </div>
        <div style="background-color: Violet;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: slateblue;" class="span4">
            This is a button
        </div>
    </div>

    <div class="row">
        <div style="background-color: orange;" class="span4">
            This is a label
        </div>
        <div style="background-color: orangered;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: yellow;" class="span4">
            This is a button
        </div>
    </div>

    <div class="row">
        <div style="background-color: seagreen;" class="span4">
            This is a label
        </div>
        <div style="background-color: green;" class="span4">
            This is a textbox
        </div>
        <div style="background-color: lightgreen;" class="span4">
            This is a button
        </div>
    </div>    

</div>

Der graue Bereich mit den Knöpfen ist von diesem Code:

<div style="background-color: gray;">
    <div class="pager">
        <div class="pull-left">
            <a href="#" class="btn" data-bind="css: { disabled: !hasPrevious() }, click: previous">previous</a>
            <a href="#" class="btn" data-bind="css: { disabled: !hasNext() },     click: next">next</a>
        </div>
        <div class="pull-right">
            <span data-bind="text: stepNumber()" />
            <span>/</span>
            <span data-bind="text: stepsLength" />
        </div>
    </div>
    <hr />

    <!-- ko compose: { model: activeStep,
        transition: 'entrance' } -->
    <!-- /ko -->
</div>
  1. Warum fällt das gesamte 3-Spalten-Design zusammen, wenn ich den verbleibenden -30px-Rand entferne?

  2. Wie soll ich meinen Code ändern, um wirklich ein 3-Spalten-Layout zu erhalten, bei dem jede Spalte die gleiche Breite hat? Das sollte span4 tun.

44
Elisabeth

Frage 1:

die spans haben alle einen margin-left von 30px, um etwas Platz zwischen den einzelnen Blöcken zu schaffen. Dieses Leerzeichen sollte nur erscheinen zwischen den einzelnen spans und nicht am Anfang (oder Ende) des row. Um dies zu erreichen, gibt es mehrere Möglichkeiten - zum Beispiel:

  • erstelle ein negatives margin mit dem Leerzeichen in der Zeile (das ist was bootstrap tut)
  • verwenden Sie den Selektor :first-child, um den linken Rand des ersten span in einer Reihe zu entfernen
  • [wird fortgesetzt]

ich kann nur davon ausgehen, dass bootstrap verwendet die erste Option, da es mit älteren Browsern kompatibler ist (höchstwahrscheinlich IE 7 und darunter)).

ein kleines Beispiel: Nehmen wir an, Ihre spans haben eine Breite von 100, ein Leerzeichen von 10 und es gibt 3 in einer Reihe.

  • ihre gesamte Zeilenbreite sollte in diesem Fall 320 sein (100 + 10 + 100 + 10 + 100 = 320)
  • eine einzelne Spannweite hat eine Breite von 110 (100 Breite + 10 magin-left)
    • wenn Sie diese Werte einfach addieren, erhalten Sie am Anfang eine Breite von 330 und einen hässlichen Abstand von 10 (10 + 100 + 10 + 100 + 10 + 100 = 330).
    • "subtrahiere" 10 mit einer der aufgelisteten Methoden (- 1 + 10 + 100 + 10 + 100 + 10 + 100 = 320)
      • Hurra, wir haben großartige Dinge mit der Kraft der Mathematik erschaffen

Frage 2 Wenn Sie span4 verwenden, haben Sie bereits 3 Spalten mit der gleichen Breite. Sie müssen nichts ändern.

32
oezi

Klasse row fügt ein

  1. clearfix
  2. negativ margin-left
  3. negativ margin-right

Bootply : http://www.bootply.com/120858

Mit negativem Rand am Anfang:

<div class="row">            
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

Ohne negativen Rand am Anfang:

<div>     
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
29
Jens A. Koch

Weil Sie keine Reihenflüssigkeit mehr verwenden müssen. Alles was Sie tun müssen, ist das Cleafix durchzuführen und den negativen Rand anzuwenden. Dies ist normalerweise für ein genaues Gittersystem richtig. Sie können Container verwenden oder anstelle von "row" einfach "clearfix" verwenden, und Sie haben genau das gleiche Verhalten wie zuvor ohne Rand.

7
Kyle

Eine Möglichkeit, dieses Problem zu lösen, ist die Verwendung von class="container row" anstatt class="row", diese Lösung passt die Reihe ohne horizontalen Überlauf in den Container.

2
Ahmed Elkoussy

Wenn Sie sich im Fluid-Modus befinden und weniger verwenden, ist ein Mixin sehr nützlich: . Offset First Child (@columns)

(siehe mixin.less von Bootstrap)

0
devside

Verwenden Sie jQuery:

$('<div>Test</div>').addClass('row').css("margin-left", 0).css("margin-right", 0).appendTo('.content');
0
Vizarius

Warum definieren Sie keine bestimmte Klasse in einem benutzerdefinierten CSS, um die Verwendung von "container" in einem separaten "div" zu vermeiden? Ich benutze:

.nomargin {margin: 0;}

und auf HTML:

<div class="row nomargin">
 …
 </div>

Gleiches Ergebnis, aber besser lesbar.

0
tedebus