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

layouttwitter-bootstrapmarginfluid-layout
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