Question

我有这个简单的引导程序内容，我想让第二列填充空白

代码

<div id="app">   
    <nav class="navbar navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Navbar</a> 
    </nav>  
    <div class="content">   
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="card">
                        <h5 class="card-header">Featured</h5>
                        <div class="card-body">
                            <h5 class="card-title">First Column</h5>
                            <p class="card-text">Curabitur accumsan turpis pharetra accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximusaugue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.Curabitur accumsan turpis pharetra accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximusaugue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti</p>    
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 ">
                    <div class="card">
                        <h5 class="card-header">Featured</h5>
                        <div class="card-body">
                            <h5 class="card-title">Second Column needs to take up the remaining space</h5>
                            <p class="card-text">additional content.</p>    
                        </div>
                    </div>
                </div>
            </div>    
        </div>
    </div>
</div>

https://codepen.io/anon/pen/mQPdLj/

那么如何在第二列中不使用特定高度的情况下进行制作？第一列可以占用任何空间，而其他列则需要填充，即使内容较少。我尝试了flex-grow和flex-fill，但对我没有用。

Answer 1

您可以使列弯曲，并使卡弯曲增长：1：

.col-sm-6 {
  display:flex; 
  flex-direction:column;
}
.card {  
  margin: 1rem 0;
  background: #eff2fb;
  flex-grow:1;
}

Updated pen

Answer 2

还有一个现成的引导程序解决方案。

将d-flex align-items-stretch类添加到具有col-sm-6的元素中。

<div class="content">   
    <div class="container">
        <div class="row">
            <div class="col-sm-6 d-flex align-items-stretch">
                // ...
            </div>
            <div class="col-sm-6 d-flex align-items-stretch">
                // ...
            </div>
        </div>
    </div>
</div>

在此处查看工作代码：https://codepen.io/anon/pen/mQPyWY

Answer 3

这也可以在两列中添加类“ d-flex align-items-stretch”。

如何使列占用剩余空间

3 个答案: