在引导程序中使用嵌套列会产生意外结果

Question

我正在尝试使用嵌套列。这是我的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>

这是输出：

为什么＆＃39; 5＆＃39;出现在下一行？

Answer 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

Answer 2

问题是bootstrap中的一行只能有12列，但是你的coloumn 5已超过它

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