Bootstrap - Warum: Zeile entfernen margin-left & nicht Row-fluid

Reihe : margin-left: -20px;

Row-fluid : nichts über margin-left.

Warum row-fluid ist nicht zu entfernen dieses margin-left durch eine bestimmte % ?

Edit :

.row-fluid > .span ist das hinzufügen margin-left.

  • Row-fluid nicht über die Eigenschaft margin-left: -20px weil es mit %. Ok - doch noch was, wenn Sie nicht möchten, dass diese -20px in deiner folgenden überspannt ?
  • Ich muss verwenden Sie 'fuild" überall, ich kann es nicht ändern, die @gridGutterWidth. aber ich muss es loswerden auf EINER meiner Seiten. Irgendeine Idee ?
InformationsquelleAutor Slake | 2013-03-28
  1. 3

    Dass ist schwer zu erklären, deine Antwort ist in Fett, der rest ist Kontext.

    Was ist die Logik, wenn im statischen layout?

    Den span Elemente haben margin-left: 20px zu bleiben, getrennt von anderen spans.

    Den row element hat margin-left: -20px um sicherzustellen, dass die ersten span -oder jede span platziert auf der "linken Spalte"- am Anfang der container.

    Funktioniert es, weil die statische row hat nicht seine width, so dass margin-left: -20px nicht subtrahieren der Breite um das element, das weiterhin ausfüllen seiner Vorfahren.

    , Was passiert, in einem fluid-layout?

    Wir könnten versuchen, die gleiche Logik, aber der Unterschied ist, dass die width und margin-left von span Elemente ist definiert in Prozenten, so wenn wir erhöhen die tatsächliche Breite des row element (durch anlegen einer negativen margin), diese span Elemente auch vergrößern, so dass Sie nicht passen in der container.

    So fluid-layout verwendet eine andere Technik für die Verwirklichung eines ähnlichen Ergebnis, nur gilt eine margin-left: 0 zu den :first-child.

    , Tiefer zu Graben

    ... Und warum nicht mit der gleichen Strategie in beiden layouts? Sicher, das wird Sie erleichtern die Umsetzung, aber die statischen Verfahren (nicht anwendbar ist, um fluid) ist mächtiger. Das ist, weil jedes element, das fällt in die "linke Spalte", wird :first-child oder nicht, wurde "margin-korrigiert". Statische layouts müssen, dass die Art von Verhalten, um bequem die Bereitstellung von Reaktionsfähigkeit, fluid layouts können -mehr oder weniger - zu verwalten, ohne Sie.

    InformationsquelleAutor albertedevigo
  2. 4

    Erfahren Sie mehr über die flüssigen Aspekte des Bootstrap-hier: http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

    Weil <span> tags ecapsulated innerhalb .row haben eine margin-left: 20px. Die negativen linken margin ist zu entgegnen, so dass die Zeile korrekt angezeigt. Mit der .row-fluid > span Beziehung, die span-tags innerhalb dieser Kapselung nicht haben, einen linken Rand, daher wird diese nicht korrigiert werden müssen, innerhalb .row-fluid

    • Was Sie sagen, scheint falsch zu sein, in Bezug auf die Dokumentation der Proben.
    • Ich schaute auf den code-und CSS-Beispiele, die Sie, schien, dies war der Fall für mich. Werfen Sie einen Blick auf die CSS in bootstrap, in Bezug auf beide .Zeile und .row-fluid und Ihren jeweiligen Kindes umfasst.
    • ok, aber das ist es nicht, man kann sagen, durch die visual.
    • Follow-up-Frage: Warum ist das margin-left 20px auf der Spanne zu beginnen mit, die es braucht, um counter gehandelt? Warum nicht einfach entfernen Sie die 20px margin-von der span eher als counter zu handeln es mit -20px margin-left auf die Reihe?
    InformationsquelleAutor Luke Smith
Schreibe einen Kommentar