我可以在另一个 col 中有一个 Bootstrap col 吗？

Question

我对 Bootstrap 还是个新手，我正在努力弄清楚什么是正确的，什么不是。在 col 中包含 col 是否可以接受？在下面的示例中，我有一个要适合屏幕一半的表单。我还希望某些表单控制元素为一半大小，而其他元素为全宽。这是解决此问题的正确方法还是有更好的方法？

示例代码：

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

Answer 1

是的，根据 Bootstrap 的 Grid Template 指南：

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.

但是，Bootstrap .row 有一个要点，即应用负边距以对齐内容。如果您不介意间距，或者能够自己调整列来解决这个问题，那么为嵌套列添加 .row 容器就没有意义了。您也可以将 .row class 放在与 .col 相同的元素上以删除这些间距（感谢 Extragory 指出）。

同样，不将列换行会导致某些属性无法正确应用，例如 .col class 上的 flex 属性。 .row 有 display: flex，任何具有 flex 属性的子项都需要应用这些属性...否则它们将被忽略。

Answer 2

您可以根据需要将列嵌套到任意多的层次，但它们通常应该在一行中。行具有负边距以说明列上的填充，因此如果您将列嵌套在列内而中间没有行，则会弄乱页面的对齐方式。

Answer 3

<section class="options pt-3 pb-5" id="options">
    <div class="container pt-5 pb-5">
        <div class="row">
            <div class="col-md-7">
                <div class="options_title text-start pt-5 pb-2">
                    <h2 class="pt-5 pb-2">Crafted for Startup, SaaS <br> and Business Sites.</h2>
                    <p class="options_p pt-1 pb-5">The main ‘thrust’ is to focus on educating attendees on how to <br> best
                        protect highly
                        vulnerable business applications with <br> interactive panel discussions and roundtables.
                    </p>
                </div>
                <div class="options_check d-flex justify-content-start align-items-start text-start">
                    <div class="col-md-3 text-start">
                        <p class="check_fai"><i class="fa-solid fa-check"></i> Premium quality</p>
                        <p class="check_fai"><i class="fa-solid fa-check"></i> No code required</p>
                        <p class="check_fai"><i class="fa-solid fa-check"></i> Use for lifetime</p>
                    </div>
                    <div class="col-md-3 text-start">
                        <p class="check_fai"><i class="fa-solid fa-check"></i> Regular updates</p>
                        <p class="check_fai"><i class="fa-solid fa-check"></i> Rich document</p>
                        <p class="check_fai"><i class="fa-solid fa-check"></i> Developer friendly</p>
                    </div>
                </div>
            </div>
            <div class="col-md-5 pt-5">
                <img src="img/options-image.svg" alt="">
            </div>
        </div>
    </div>
</section>

我可以在另一个 col 中有一个 Bootstrap col 吗？

Can I have a Bootstrap col inside of another col?

html

css

twitter-bootstrap

twitter-bootstrap-3