Question

我需要让我的bootstrap列跨越一行的整个高度。我遇到的问题是我不能让它改变大小。

目前我的HTML看起来像这样

<div class="container">
    <div class="row">
        <div class="col-sm-1">
        </div>
        <div class="col-sm-11">
         <!-- Content removed for demo | large form here -->
        </div>
    </div>
</div>

col-sm-11包含x高度（约400 / 500px）的表格

col-sm-1不包含任何内容，但我希望将其设为100％高度，以便与其旁边的表单相匹配。我该怎么做呢

尝试

我已尝试将height 100%应用于该列但仍保持不变。

我也尝试设置像300px这样的静态金额，但这只是推动了表格。我无论如何都要100％

Answer 1

我能想到的最简单的方法是使用一行jQuery，如果可能的话。

为两列中的每一列添加一个类，两个单独的类。

<div class="col-sm-1 col1">
</div>
<div class="col-sm-11 col2">
</div>

在jQuery中，只需在$（document）.ready（function（）{...}）的顶部添加这行代码;

$('.col1').height($('.col2').height());

Here is a JSFiddle

注意：我制作了你的col-sms col-xs，这样你就可以在没有调整大小的情况下在JSFiddle中看到它。

注意＃2 ：您可能希望将jQuery行放在$（window）.resize（function（）{...}）中;因此它随着响应性而变化。

Bootstrap |使col跨度为行的全高

尝试

1 个答案: