Question

我在我的页面中使用一个panel panel-defaul来显示一些数据，但我需要将我的面板的min-width设置为720px，如果Windows调整为低于720px我需要看起来像一个scrollX但是当我需要做类似的事情时，面板不能像使用table-responsive一样低于720px，但是使用表格我这样做：

HTML
<div class="example-table table-responsive">
    <table id="example-table" class="table table-hover">
    </table>
</div>

CSS
.example-table{
    max-width: 720px;
}
#example-table{
    min-width: 720px;
}

如果我使用规则.panel{min-widht:720px;}没有任何事情发生。

如何在我的面板中获得相同的效果？

编辑：好的，我在jsfiddle中尝试了这一点，我的确切问题是，无论我在min-width: 760px中设置了panel-body的内容，两个col-sm-6创建两行，但我需要两个col-sm-6保持相同的两列而不是两行，我认为这是因为min-weidth但是现在我不知道为什么即使创建了scrollX也会发生这种情况。

Answer 1

您可以像这样使用media-queries：

@media (min-width: 720px) {
    .example-table {
        <!-- Your css properties here -->
    }

}

Answer 2

因此，根据您更新的问题，您希望列无论屏幕宽度如何都保持内联。您可以通过将col-sm-6改为col-xs-6来实现这一目标：

<div class="col-xs-6">
    <strong>Something here</strong>
</div>
<div class="col-xs-6">
    <strong>Something here</strong>
</div>

jsFiddle：https://jsfiddle.net/rvzy9s5k/1/

将最小宽度指定给引导面板

2 个答案: