我可以在另一个col内放置一个Bootstrap col吗？ [英] Can I have a Bootstrap col inside of another col?

问题描述

我对Bootstrap还是陌生的，我试图弄清楚什么是正确的，什么不是正确的。在 col 中包含一个 col 是否可以接受？在下面的示例中，我有一个要适合屏幕一半的表单。我还希望某些表单控制元素为一半，而其他元素为全角。这是执行此操作的正确方法还是有更好的方法？

示例代码：

 < ;!-最新的经过编译和缩小的CSS->< link rel = stylesheet href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap .min.css><！-最新的经过编译和精简的JavaScript-><脚本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>联系人< / h1> < / div> < form class = col-xs-12 col-sm-8 col-sm-offset-2 form-horizo​​ntal> < div class = form-group form-group-lg> < div class = col-sm-12> < input class = form-control type = text占位符=名称> < / div> < / div> < div class = form-group form-group-lg> < div class = col-xs-6> < input class = form-control type = text占位符=电子邮件> < / div> < div class = col-xs-6> < input class = form-control type = text占位符=网站> < / div> < / div> < button type = submit class = btn btn-warning btn-lg右上角col-xs-12> Submit< / button> < / form> < / div>< / section>  

解决方案

是的，根据Bootstrap的网格模板指南：

两列带有两个嵌套列

根据文档，嵌套很容易，只需在现有列中放置一列列即可。这样一来，您可以从桌面开始两列，然后再扩展到大型桌面，在较大的列中还有另外两列（相等的宽度）。

在移动设备尺寸，平板电脑及以下设备上，这些列及其嵌套列将堆叠。

但是，指向Bootstrap .row ，这将应用负边距以对齐内容。如果您不关心装订线，或者能够自行调整列以解决此问题，那么为嵌套列添加 .row 容器没有任何意义。 / p>

I am still new to Bootstrap and I am trying to figure out what is correct and what is not. Is it acceptable to have a col inside of a col? In the example below, I have a form that I want to fit half of the screen. I also want certain form-control elements to be half size while other of full width. Would this be the correct way to go about this or is there a better way?

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

解决方案

Yes, that's OK to have, according to Bootstrap's Grid Template guide:

Two columns with two nested columns

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

However, there is a point to a Bootstrap .row, which is to apply a negative margin in order to align content. If you don't mind gutters, or are capable of adjusting the columns yourself to account for this, then there's no point in adding a .row container for your nested columns.

这篇关于我可以在另一个col内放置一个Bootstrap col吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！