Comment puis-je supprimer une colonne de rembourrage pour avoir la pleine largeur des entrées dans le Bootstrap 3?

Comment puis-je me débarrasser de rembourrage dans le Bootstrap 3 colonnes?

Dans la suite de plunkr, j'aimerais que le bouton et la saisie de texte à toucher: http://plnkr.co/edit/H5EIiCyiH8HbploTghVZ?p=preview et pour chacun de remplir la totalité de la largeur de la div. Je voudrais qu'ils ont pas de gauche de droite ou de rembourrage. De même pour le "pull me gauche" et de "moi aussi" divs.

Quand je remplace le padding-left dans mon propre CSS, il tire tout vers la gauche, de faire le "Jim" et "Bonjour" div du contenu hors de l'écran.

Des idées?

OriginalL'auteur iffy | 2013-09-14

  1. 10

    Vous pouvez atteindre cet objectif en ajoutant une classe à la ligne qui supprime rembourrage immédiate de tous les éléments div avec un nom de classe commence par "col".

    Voir ici: http://plnkr.co/edit/MBkojy?p=preview

    Merci!!!! Ce qui semble faire ce que je veux. (Même si j'ai juste abandonné bootstrap en faveur d'une beaucoup plus petite personnalisé système de grille).
    Vous êtes un professionnel.

    OriginalL'auteur Peter

  2. 0

    Voici le code entier ce que tu voulais 🙂 s'il vous Plaît essayez de donner une 

    <!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<style>
  body {
    padding-top: 60px;
  }
  @media (max-width: 979px) {

    /* Remove any padding from the body */
    body {
      padding-top: 0;
    }
  }
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="script.js"></script>

    Juste un div

        <div class="row">
        <div>
            <div class="col-xs-12">
                <div class="row">
                    <div class="col-xs-6">
                        <div class="row">
                            <div class="col-xs-12">Jim</div>
                            <div class="col-xs-6">Hello</div>
                            <div class="col-xs-6">
                                <div class="row">
                                    <div class="col-xs-6" style="padding-right:0px !important; padding-left:0px !important">
                                        <button class="btn" class="col-xs-12" style="width:100%; float:right; background-color:green; ">Click</button>
                                    </div>
                                    <div class="col-xs-6" style=" padding-left:0px !important; padding-right:0px !important">
                                        <input type="text" class="col-xs-12" style="width:100%;">
                                    </div>
                                </div>
                            </div>    
                        </div>
                    </div>
                    <div class="col-xs-6">pull me left</div>
                    <div class="col-xs-6">me too</div>
                </div>
            </div>
        </div>
    </div>

    Je l'ai fait pour le bouton et la saisie de texte 🙂 vous pouvez procéder de la même manière 🙂

    Merci @Anobik, mais je suis à la recherche d'un moyen de le faire pour tous les divs, pas avec le style attribut. J'aurais dit de la sorte.
    essayez d'utiliser une classe css et de l'affectation de la classe à la balise div. 🙂 l'utilisation de javascript ou body onload de la fonction à affecter à la classe de tous ceux div qui ont bouton comme un enfant et une zone de texte. utiliser js getElementsByClassName et vous obtiendrez un tableau et de les vérifier.

    OriginalL'auteur Anobik

  3. -2

    Vous pouvez définir tous les divs à pas de rembourrage:

    div {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

    Pour les deux autres divs, vous aurez besoin de leur donner une partie de la classe nommée (dans mon exemple "padLeft") que le retour de la gauche de rembourrage pour les divs.

    div.padLeft {
    padding-left: 15px;
}

    C'est le mini-invasive façon de le faire. Si vous avez plus de div à l'endroit où vous voulez rembourrage que vous pas simplement l'inverse de ce, à l'aide d'une catégorie distincte pour les divs que vous voulez que le rembourrage supprimé et laisser les autres à leur valeur par défaut.

    Si je viens justement de le faire div {padding-left: 0px !important; padding-right: 0px !important;} les divs déborder dans les uns des autres. Mais si j'ai aussi mis margin-left: 0px !important; margin-right: 0px !important; il ressemble à droite.
    la création d'un div règle telle que le premier est garanti désordre des choses d'une manière qu'on ne peut l'imaginer, l'utilisation de classes aussi loin que possible.

    OriginalL'auteur user1647020