问题在bootstrap4列中嵌套3列 [英] Problem nesting 3 columns inside bootstrap4 column

问题描述

在下面的代码中，我期望嵌套在左起第2列的2列中的3列(A of 3，B of 3和C of 3)看起来像列"，而不是像行一样显示.我究竟做错了什么?谢谢.

In the following code, I was expecting the 3 columns nested within column number 2 from the left (A of 3, B of 3 and C of 3), to look as "columns", instead they are showing like rows. What am I doing wrong? Thanks.

提琴:对代码进行修饰

代码文字:

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

推荐答案

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

You need to use another .row to wrap the inner columns.

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>

这篇关于问题在bootstrap4列中嵌套3列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！