Question

使用最新的Bootstrap版本时，可以利用Bootstrap的内置响应能力。

执行此操作的一种方法是使用预定义的网格布局。一个例子（JSFiddle）：

<div class="row">
    <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
    <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
    <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
    <div class="col-xs-6 col-sm-3">col-xs-6 col-sm-3</div>
</div>

col-[screensize]-[colspan]语句定义了每个元素应占用的空间。

现在我想知道：说你有一个有3个不同列的布局。在其中一列中，有一张表。

当列（ NOT 窗口！）大于sm时，表格应该有4列，但如果它更小，则应该只有2列。

逻辑思考，我会设置这样的东西（JSFiddle）：

<div class="row">
    <div class="col-sm-4">col-sm-4</div>
    <div class="col-sm-4">col-sm-4
    <table class="table table-striped">
        <tbody>
            <tr>
                <td>TD 1</td>
                <td>TD 2</td>
                <td class="hidden-xs">TD 3 hidden-xs</td>
                <td class="hidden-xs">TD 4 hidden-xs</td>
            </tr>
            <tr>
                <td class="visible-xs">TD 3 visible-xs</td>
                <td class="visible-xs">TD 4 visible-xs</td>
            </tr>
        </tbody>
        </table>
    </div>
    <div class="col-sm-4">col-sm-4</div>
</div>

此处的问题是表格列基于窗口宽度显示，不列宽度，这是所需的行为。

有谁知道如何实现这一目标，例如：关于父母的反应，而不是窗口？

Answer 1

您只能使用css解决方案来实现目标。

这是合理的事实，表格列宽度取决于其内容，或间接取决于窗口宽度（如果列宽度以％表示）。

所以你应该使用jQuery来检测＆＃34;实际列宽，然后执行特定操作。

在我看来，你可以使用jQuery切换＆＃34; display:none;＆＃34; /＆＃34; display:table-cell＆＃34;最后两列取决于在其他列上检测到的宽度。

Bootstraps相对于父母的反应能力

1 个答案: