如何避免 Bootstrap 3 中的单元格包装

【问题标题】：How avoid cell wrapping in Bootstrap3如何避免 Bootstrap 3 中的单元格包装
【发布时间】：2015-11-25 04:08:23
【问题描述】：

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

在那里您可以看到两个主要列：#main-left-column 和 #main-right-column。

在 #main-right-column 上，我放置了六个绿色单元格，一切都按照 Bootstrap 作者的要求运行，但我想以某种方式在我的右列上添加 'overlay-x:auto' CSS 属性以避免单元格换行。

知道怎么做吗？

【问题讨论】：

标签： twitter-bootstrap css twitter-bootstrap-3

【解决方案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

【讨论】：