为什么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像素.