Puis-je avoir un Bootstrap col à l'intérieur d'un autre col?
Je suis encore nouveau pour le "Bootstrap" et je suis à essayer 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 veux pour s'adapter à la moitié de l'écran. Je veux aussi une certaine forme de contrôle des éléments à la moitié de la taille tandis que d'autres de la largeur complète. Serait-ce la bonne façon d'aller à ce sujet ou est-il un meilleur moyen?
Exemple de code:
HTML:
<!-- 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>
Vous devez vous connecter pour publier un commentaire.
Oui, c'est OK d'avoir, selon Bootstrap est Modèle De Grille guide:
Cependant, il ya un point à un Bootstrap
.row
, qui consiste à appliquer une marge négative afin d'aligner le contenu. Si vous n'avez pas l'esprit de gouttières, ou sont capables d'ajuster les colonnes de vous-même pour rendre compte de cela, alors il n'y a aucun point dans l'ajout d'un.row
conteneur de vos colonnes imbriquées.row
classe. Voir jsfiddle.net/6L2Lcapd pour démontrer les colonnes imbriquées directement dans les autres colonnes..row
", c'est donc en se référant rien mais une classe. Dans votre violon, les cols ne sont pas d'atteindre les côtés de la ligne et qui n'est pas le comportement attendu. Bien sûr, vous pouvez mettre un récipient à l'intérieur d'une ligne et la ligne à l'intérieur d'une colonne, vous pouvez appliquer des classes css que vous voulez, mais ce n'est pas le but de la structure de Bootstrap et vous obtiendrez des résultats inattendus..col
s de travail.Vous pouvez avoir des colonnes imbriquées sur autant de niveaux que vous le souhaitez, mais ils doivent généralement être à l'intérieur d'une ligne. Les lignes ont des marges négatives pour tenir compte de la marge sur les colonnes, donc si vous avez des colonnes imbriquées à l'intérieur des colonnes sans une ligne entre les deux, il gâchera l'alignement de votre page.
.row
sur entrée sans l'appliquer à d'autres intrants. C'est pourquoi le choix de la taille est un peu bizarre.