html - 自举 |使 col 跨越行的全高

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/500 像素)的表单

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-sm 的 col-xs，这样你就可以在 JSFiddle 中看到它而无需调整大小。

注意 #2:您可能希望将 jQuery 行放在 $(window).resize(function() {...}) 中；使其随响应而变化。