web-dev-qa-db-fra.com

Twitter Bootstrap 3 Suppression de la marge DROITE et du remplissage sur une ligne et col-12

J'utilise Twitter Bootstrap 3.0 MOINS source dans mon projet Asp.Net MVC 5. J'utilise une barre de navigation supérieure ( comme indiqué ici ), puis quelques lignes supplémentaires dans la page de mise en page.

J'utilise ce qui suit pour que les lignes prennent une largeur de page de 100%:

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

Mais cela ajoute un rembourrage supplémentaire à droite de chaque rangée. Cela ajoute également une barre de défilement horizontale à la page et une gouttière verticale vierge sur toute la page est visible lorsque vous faites défiler la page vers la droite.

La suppression de la marge à droite sur chaque ligne et du remplissage à droite sur tous les col-md-12 corrige la disposition. Cependant, je ne pense pas que ce soit la bonne façon de procéder.

Une idée comment supprimer ces marges inutiles et le rembourrage à droite une fois pour toutes, tout au long du bootstrap.css résultant?

htmlcsstwitter-bootstraplesstwitter-bootstrap-3
18
Santosh

Votre problème est dû au fait de ne PAS envelopper votre .rows dans un .container classe.

Essaye ça:

<div class="container" style="width:100%;background-color:blue;">
<div class="row" style="background-color:green;">
    <div class="col-md-12" style="background-color:red;">
       <div style="background-color:yellow;">test test test</div>
    </div>
</div>
</div>

Le width:100%; Sur ton .container rendra les lignes 100% (rouges). Le sera toujours un rembourrage autour de votre contenu (jaune). Ce rembourrage est la gouttière de la grille, voir: https://stackoverflow.com/a/19044326/1596547

Non, cela n'aide pas. Le padding-right sur col-md-12 prévaut toujours. Je cherche quelque chose de générique implémenté dans .less source pour tout type de colonne (col - * - 12)!

Tout col-*-* ont un rembourrage de 15px des deux côtés. Il n'y a aucune différence entre les *-12 classes sauf du *-12 les classes n'ont plus de flotteur.

sélecteur css/less pour tous vos col-* Des classes:

[class^="col-"] {
  padding-left: 0;
  padding-right: 0;
}

sélecteur css/less pour tous vos col-*-12 Des classes:

[class$="-12"]
{
  padding-left: 0;
  padding-right: 0;
}
27
Bass Jobsen

Le code original bootstrap est

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

c'est pourquoi vous avez un 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 seule fois, vous ne devez pas remplacer le CSS bootstrap. Ensuite, vous pourrez l'utiliser plus tard avec le comportement normal.

Ce que je ferais, c'est d'ajouter une autre classe comme celle-ci:

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

6
Marc

Le moyen le plus simple de résoudre ce problème consiste à commenter le remplissage gauche et droit de toutes les colonnes, à définir le remplissage gauche et droit de la classe de conteneur à 0 et à supprimer une marge négative des lignes.

Il suffit de mettre en commentaire la classe .row à la ligne 691 et à la ligne 714 de mettre en commentaire le code pour le remplissage gauche et droit sur la classe ^ = "col-".

Cela 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;*/
}
1
Denis

Comme mentionné ci-dessus, la première chose à faire est de faire correspondre les classes container et row:

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

Pour supprimer 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 conteneur pour restreindre cette suppression du rembourrage à ce seul endroit (ou à tout autre conteneur avec serré dessus). Le faire à l'échelle mondiale pourrait potentiellement interférer avec d'autres choses comme les barres de navigation.

0
user1118279

Il faudrait aller dans le code source de bootstraps, trouver le .row selector, et changez le css associé à.

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

Au lieu de cela, je recommanderais de créer votre propre sélecteur à utiliser pour ce type de ligne que vous souhaitez. Si vous deviez faire cela, vous ne pourriez pas l'appeler .row car cela entrerait en conflit avec .row sélecteur utilisé par bootstrap. Il faudrait l'appeler quelque chose comme .custom-row

0
Peter Berg

Vous pouvez résoudre ce problème dans Bootstrap 3 en:

  1. Envelopper votre rangée dans une div avec une classe de conteneur ou de conteneur-fluide et ajouter un rembourrage de 0px.
  2. Masquer le trop-plein horizontal.

Exemple:

Enveloppez d'abord votre rangée dans un conteneur:

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

Ajoutez ensuite un remplissage de 0px à votre classe de conteneur:

.container {
    padding: 0px;
}

Terminez en masquant le trop-plein horizontal:

body {
    overflow-x: hidden;
}

Ta da!

0
ariebear