web-dev-qa-db-fra.com

Bootstrap: disposition fluide sans marge externe

si j'ai:

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

Avec ce code, j'ai une marge de gauche et de droite. Comment peut éliminer ces marges?

Merci pour votre aide

layouttwitter-bootstrapmarginfluid-layout
22
Tom

Si je comprends bien votre question, je pense que vous voulez ceci:

.container-fluid {
    padding: 0px;
}

De plus, si vous utilisez un bootstrap réactif, vous voudrez également ceci: 

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

Edit: voici un js fiddle .

31
hajpoj

L’effet observé est dû au remplissage de la variable container.

Vous pouvez modifier le remplissage par défaut de container avec les classes d’utilitaire - Bootstrap 4 intégrées .

Pour supprimer le remplissage, ajoutez p-0 à la container:

<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>

L’utilisation des classes d’utilitaires intégrées présente l’avantage de garder votre CSS sobre et ne modifie pas non plus la définition de classe container-fluid par défaut.

0
AndreasPizsa