Question

首先，对于这个问题的质量感到抱歉，但解释我想要实现的目标是非常困难的，这是我准备的Sample code。

您可以看到两个主要栏目：#main-left-column和#main-right-column。

关于那个#main-right-column我已经放置了六个绿色单元格，一切都像Bootstrap作者想要的那样工作，但我想以某种方式在我的右栏添加'overlay-x:auto' CSS属性以避免单元格包装。

知道怎么做吗？

Answer 1

简单，

将<div>（#main-right-column内的列）放入<table>容器中并设置最小宽度。

CSS：

.width-300-450 {
    min-width:300px;
    width: 100%;
    max-width:450px
}

示例：

<table>
    <tr>
        <td>
            <div class="width-300-450">
                <div class="col-xs-12 bg-success">
                    <h2>test</h2>
                </div>
                <div class="col-xs-12 bg-warning">
                    <p>...</p>
                </div>
            </div>
        </td>
        <td>
            <div class="width-300-450">
                <div class="col-xs-12 bg-success">
                    <h2>test</h2>
                </div>
                <div class="col-xs-12 bg-warning">
                    <p>...</p>
                </div>
            </div>
        </td>
    </tr>
</table>

开启#main-right-column您必须设置overlay-x属性：

#main-right-column {
    overflow-x: auto;
    display: inline-block;
    padding:0;
}

此处的完整示例：Bootstrap fiddle

如何避免Bootstrap3中的单元格包装

1 个答案: