Css 为什么引导程序将最后一列推到下一行

我有下面的HTML

<div class="container">
    <div class="row">
        some content here
    </div>

    <div class="row">
        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-1"></div>
                <div class="col-xs-4 col-md-2">17:00-18:00</div>
                <div class="col-xs-7 col-md-9">
                    <a href="#">Some looooooooooooooooooooooooooooooooooong Text goes here</a>
                </div>
            </div>
            <!-- more rows like this follow -->
        </div>  
    </div>
</div>

这里有一些内容
17:00-18:00

我想要的是，我的嵌套行在320x480设备上具有[1][4][7]布局。

---

但是，当我调整到大约350宽度时，最后一列在日期下面的下一行我希望文本位于日期的右侧，而不是日期的下方（320x480）。如果我将最后一列的宽度更改为6，则效果良好。这是什么原因？因为1+4+7=12，我希望这也能起作用

您必须覆盖该尺寸的衬垫

问题是一列占总宽度的8.333%（使用12列时）。320像素，即每列26.6像素

但是您的布局每列有15像素左右的填充

因此，即使列应该是26.6像素，由于填充，它仍然保持其最小值30像素。这意味着其余的列无法容纳剩余的空间，最后一列将断开

---

---

从那以后，有15个像素的填充意味着最小列宽是30个像素。这意味着12列布局的最小宽度为360像素。

当你说最后一列在下一行时，你指的是它将“此处”包装到下一行的方式，对吗，因为这是预期的行为。@jordan是的，这就是我的行为mean@paulalexandru看到了吗JordanD@JordanD因此，除了使用6列之外，没有其他方法可以防止这种情况发生？@JordanD