wake-up-neo.com

Bootstrap: flüssiges Layout ohne äußeren Rand

wenn ich habe:

<div class="container-fluid">
   <div class="row-fluid">
      <div class="span8">
             Some Element....
       </div>
       <div class="span4">
             Other Element
       </div>   
   </div>       
</div>

Mit diesem Code habe ich einen Rand von linken und rechten Fensterrändern. Wie können diese Margen beseitigt werden?

Danke für deine Unterstützung

22
Tom

Wenn ich deine Frage richtig verstehe, glaube ich, dass du das willst:

.container-fluid {
    padding: 0px;
}

Wenn Sie responsive Bootstrap verwenden, möchten Sie auch Folgendes: 

@media (max-width: 797px) {
    body { 
        padding-left: 0px;
        padding-right: 0px;
    }
}

Edit: hier ist eine js-Geige .

31
hajpoj

Der Effekt, den Sie sehen, ist auf die Auffüllung der container zurückzuführen.

Sie können die Standardfüllung von container mit den integrierten Bootstrap 4-Abstandsdienstprogrammklassen ändern.

Um die Auffüllung zu entfernen, fügen Sie der containerp-0 hinzu:

<div class="container-fluid p-0">
    <div class="row">
      <div class="col-8">
         Some Element....
       </div>
       <div class="col-4">
          Other Element
       </div>   
    </div>       
</div>

Die Verwendung der integrierten Dienstprogrammklassen hat den Vorteil, dass das CSS schlank bleibt und die Standarddefinition der Klasse container-fluid nicht geändert wird.

0
AndreasPizsa