为什么Bootstrap在下一行推送最后一列

Question

我有以下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>

我想要的是我的嵌套行在320x480设备上有[1] [4] [7]布局。 但是当我调整到大约350宽度时，最后一列会在日期下面的下一行上显示。 我希望文本位于日期的右侧而不是日期的下方（320x480）。如果我将最后一列的宽度更改为6，则可以正常工作。这是什么原因？由于1 + 4 + 7 = 12，我预计这也会起作用。

Answer 1

您必须覆盖该大小的填充。

问题是一列是总宽度的8.333％（使用12列时 ）。在320像素，这意味着每列26.6像素。

但是你的布局每列有15像素的左/右填充。

因此，即使列应为26.6像素，由于填充，它仍然保持在最小30像素。这意味着其余的列不能适合剩余的空间而最后一个列会中断..

---

从此开始，具有15个像素填充意味着最小列宽为30像素。这意味着12列布局的最小宽度为360像素。