在引导程序中使用嵌套列会产生意想不到的结果答案

【问题标题】：using nested columns in bootstrap gives unexpected result在引导程序中使用嵌套列会产生意想不到的结果
【发布时间】：2014-10-08 18:39:09
【问题描述】：

我正在尝试使用嵌套列。这是我的 HTML：

 <div class="container">
    <div class="row" style="color: #FFFFFF">
        <div class="col-xs-1">
            1</div>
        <div class="col-xs-10">
            <div class="row" style="color: #FFFFFF">
                <div class="col-xs-4" style="background-color: #0099FF">
                    2</div>
                <div class="col-xs-4" style="background-color: #33CC33">
                    3</div>
                <div class="col-xs-4" style="background-color: #CC33FF">
                    4</div>
            </div>
        </div>
        <div class="col-xs-1">
            5</div>
    </div>
</div>

这是输出：

为什么“5”出现在下一行？

【问题讨论】：

大家好。感谢您的回复。出于某种原因，我粘贴了错误的标记。我刚刚更新了它。如您所见，我在这里遵守“12”列的规则？

标签： html twitter-bootstrap-3 grid

【解决方案1】：

我认为您希望 col-xs-10 在 .row 之外，以便嵌套列上的负边距正常工作..

<div class="container">
        <div class="row" style="color: #FFFFFF">
            <div class="col-xs-1">
                1</div>
            <div class="col-xs-10">
                <div class="row" style="color: #FFFFFF">

                        <div class="col-xs-4" style="background-color: #0099FF">
                            2</div>
                        <div class="col-xs-4" style="background-color: #33CC33">
                            3</div>
                        <div class="col-xs-4" style="background-color: #CC33FF">
                            4</div>

                </div>
            </div>
            <div class="col-xs-1">
                5</div>
        </div>
</div>

演示：http://www.bootply.com/nyv0SEi3B4

【讨论】：

嗨，我试过了，当我将窗口大小调整为我发布的屏幕大小时，它仍然给出了我在问题中说明的结果？
总是会在小于 360 px 的宽度处进行包装/堆叠。请参阅stackoverflow.com/questions/18365908/…

【解决方案2】：

问题是bootstrap中的一行只能有12个coloumn，但是你的coloumn 5已经超出了它

尝试将 2,3 和 4 的列大小减小到 col-xs-3 并尝试。

【讨论】：