Bootstrap Twitter 3 Supprimer marge droite et rembourrage sur une rangée et col-12

le code original de bootstrap est

.row{
   margin-right:-15px;
   margin-left:-15px;
}

c'est pourquoi vous avez rembourrage et une barre de défilement.

vous voulez donc les réinitialiser à 0px mais si c'est quelque chose que vous ne voulez qu'une fois, vous ne devriez pas surcharger le bootstrap CSS d'origine. Ensuite, vous pouvez l'utiliser avec le comportement normal.

Ce que je voudrais faire est d'ajouter une autre classe comme ceci:

<div class="row rowWithFullWidth">
    <div class="col-md-12">
        // More HTML code
    </div>
</div>

puis avec ce CSS

.rowWithFullWidth {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

de cette façon, vous pouvez utiliser .row avec le comportement normal après.

la façon la plus facile de résoudre ce problème est de commenter le rembourrage gauche et droite de toutes les colonnes, mettre le rembourrage gauche et droite sur la classe de conteneur à 0 et de supprimer une marge négative des lignes.

Juste un commentaire .classe de ligne à la ligne 691 et à la ligne 714 commentaire code pour le remplissage à gauche et à droite sur la classe^="col-".

ce qui fonctionne pour moi:

.container {
     padding-right: 0;
     padding-left: 0; 
     margin-right: auto;
     margin-left: auto;
}

.row {
   /*margin-right: -15px;
    margin-left: -15px;*/
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        position: relative;
        min-height: 1px;
        /*padding-right: 15px;
        padding-left: 15px;*/
}

vous devez aller dans le code source bootstraps, trouver le .row sélecteur, et de modifier le css associé.

Ce n'est probablement pas ce que vous voulez faire.

a la place, je vous recommande de créer votre propre sélecteur à utiliser pour ce type de ligne que vous voulez. Si vous deviez le faire, vous ne pourriez pas l'appeler .row parce que cela entrerait en conflit avec .row sélecteur utilisé par bootstrap. Vous devez appeler quelque chose comme .custom-row

Comme mentionné ci-dessus, la première chose à faire est de faire correspondre container et ligne catégories:

<div class="container tight">
    <div class="row">
        <div class="col-md-12">
            <!-- html content -->
        </div>
    </div>
</div>

pour enlever ce rembourrage, vous pouvez alors utiliser des css comme ceci:

div.container.tight {
    padding: 0;
}

div.container.tight > .row-fluid {
    padding: 0;
}

j'ai ajouté une classe serré au contenant pour limiter l'enlèvement de ce rembourrage à un seul endroit (ou à tout autre contenant avec serré). Le faire globalement pourrait interférer avec d'autres choses comme navbars potentiellement.

vous pouvez résoudre ce problème dans Bootstrap 3 par:

1. envelopper votre rang dans un div avec une classe de contenant ou de liquide contenant et Ajouter un rembourrage de 0px.
2. Cacher le débordement horizontal.

Exemple:

enveloppez D'abord votre rang dans un contenant:

<div class="container">
  <div class="row">
    <div class="col-md-12">
    </div>
  </div>
 </div>

Puis ajouter un rembourrage de 0px à votre classe de conteneur:

.container {
    padding: 0px;
}

terminer en masquant le débordement horizontal:

body {
    overflow-x: hidden;
}

Ta da!