web-dev-qa-db-fra.com

Puis-je avoir un Bootstrap col à l'intérieur d'un autre col?

Je suis encore nouveau à Bootstrap et j'essaie de comprendre ce qui est correct et ce qui ne l'est pas. Est-il acceptable d'avoir un col à l'intérieur d'un col? Dans l'exemple ci-dessous, j'ai un formulaire que je souhaite adapter à la moitié de l'écran. Je veux également que certains éléments de contrôle de formulaire soient à moitié de taille tandis que d'autres de pleine largeur. Serait-ce la bonne façon de procéder ou existe-t-il une meilleure façon?

Exemple de code:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<section class="row">
  <div class="container">
    <div class="col-xs-12 text-center">
      <h1>Contact</h1>
    </div>
    <form class="col-xs-12 col-sm-8 col-sm-offset-2 form-horizontal">
      <div class="form-group form-group-lg">
        <div class="col-sm-12">
          <input class="form-control" type="text" placeholder="name">
        </div>
      </div>
      <div class="form-group form-group-lg">
        <div class="col-xs-6">
          <input class="form-control" type="text" placeholder="email">
        </div>
        <div class="col-xs-6">
          <input class="form-control" type="text" placeholder="website">
        </div>
      </div>
      <button type="submit" class="btn btn-warning btn-lg pull-right col-xs-12">Submit</button>
    </form>
  </div>
</section>
htmlcsstwitter-bootstraptwitter-bootstrap-3
31
Christian Juth

Oui, c'est OK d'avoir, selon Bootstrap Grid Template guide:

Deux colonnes avec deux colonnes imbriquées

Selon la documentation, l'imbrication est simple: il suffit de placer une ligne de colonnes dans une colonne existante. Cela vous donne deux colonnes commençant aux bureaux et évoluant vers les grands bureaux, avec deux autres (largeurs égales) dans la plus grande colonne.

Aux tailles d'appareils mobiles, tablettes et versions antérieures, ces colonnes et leurs colonnes imbriquées s'empilent.

Cependant, il y a un point à un Bootstrap .row, qui consiste à appliquer une marge négative afin d'aligner le contenu. Si cela ne vous dérange pas, ou si vous êtes en mesure d'ajuster vous-même les colonnes pour en tenir compte, il est inutile d'ajouter un .row conteneur pour vos colonnes imbriquées.

41
TylerH

Vous pouvez avoir des colonnes imbriquées à autant de niveaux que vous le souhaitez, mais elles doivent généralement se trouver à l'intérieur d'une ligne. Les lignes ont des marges négatives pour tenir compte du remplissage sur les colonnes, donc si vous avez des colonnes imbriquées à l'intérieur des colonnes sans ligne entre les deux, cela gâchera l'alignement de votre page.

16
mistykristie