Question

我正在尝试以下列方式嵌套列：

对于桌面视图，您应该在左侧看到LONG COLUMN 1，在中间看到LONG COLUMN 2，然后在右上角看到SHORT COLUMN 1，其下面是SHORT COLUMN 2和SHORT COLUMN 3。

对于平板电脑视图，您应该看到全长的LONG COLUMN 1，然后是全长的LONG COLUMN 2，然后是SHORT COLUMN 1，SHORT COLUMN 2＆amp;短柱3在长柱2下面彼此相邻堆叠。

这是我希望它看起来的草图（抱歉凌乱的画图）：http://imgur.com/JdI5ceX

我已经尝试了下面的代码，但它在两个视图上彼此相邻堆叠SHORT COLUMN 1-3。

非常感谢任何帮助！

干杯，查理

    <div class="container">
        <div class="row">
            <div class="col-md-4">
                LONG COLUMN 1
            </div>
            <div class="col-md-4">
                LONG COLUMN 2
            </div>
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-4">
                        SHORT COLUMN 1
                    </div>
                    <div class="col-md-4">
                        SHORT COLUMN 2
                    </div>
                    <div class="col-md-4">
                        SHORT COLUMN 3
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

你可以尝试给长列col-sm-12。然后给另一个div col-sm-4。

<div class="col-md-4 col-sm-12"></div>

<div class="col-md-4 col-sm-12"></div>

<div class="col-md-4 col-sm-12"> 
 <div class="col-md-12 col-sm-4"></div>
 <div class="col-md-12 col-sm-4"></div>
 <div class="col-md-12 col-sm-4"></div>
</div>

您可以添加xs类以进行更精细的调整。

Bootstrap 3：嵌套在桌面上的嵌套列，在移动设备上内嵌

1 个答案: