bootstrap-4 - 在 bootstrap4 列内嵌套 3 列的问题

Question

在下面的代码中，我期望嵌套在左侧第 2 列中的 3 列（A 为 3，B 为 3，C 为 3）看起来像“列”，而不是像行一样显示。我究竟做错了什么？谢谢。

小提琴： 拨弄代码

代码文本：

<div class="container">
   <div class="row">
      <div class="col-sm-3">
         q1 of 4
      </div>
      <div class="col-sm-3"><!--Issue is 
         <div class="col"> 
            A of 3 
         </div>
         <div class="col">
            B of 3 
         </div>
         <div class="col-sm-3">
            C of 3 
         </div>
      </div>
      <div class="col-sm-3">
         q3 of 3
      </div>
      <div class="col-sm-3">
         q4 of 4
      </div>
   </div>
</div>

标签： bootstrap-4

Answer 1

您需要使用另一个.row来包装内列。

https://www.codeply.com/go/c6fmh4Fypj

<div class="container">
    <div class="row">

        <div class="col-sm-3">
            q1 of 4
        </div>

        <div class="col-sm-3">
            <div class="row">
                <div class="col-2">
                    A of 3
                </div>

                <div class="col">
                    B of 3
                </div>
                <div class="col">
                    C of 3
                </div>
            </div>
        </div>

        <div class="col-sm-3">
            q3 of 3
        </div>
        <div class="col-sm-3">
            q4 of 4
        </div>
    </div>
</div>