我有兩個相鄰的框，Box1（左）有一些文本，Box2（右）有很多文本：https://i.stack.imgur.com/9JmGv.png 如何通過在框 1 上填充更多空白來使框 1 延伸到與框 2 相同的高度？我正在努力使兩個盒子的高度相同；我的代碼如下所示：<div class="container-fluid"> <div class="row"> <div class="col-md-4"> <div class="card mb-4 box-shadow"> <!-- BOX1 --> <div class="card-body"> box 1 data here </div> </div> </div> <!-- /col --> <div class="col-md-8"> <div class="card mb-4 box-shadow"> <!-- BOX2 --> <div class="card-body"> box 2 data here box 2 data here box 2 data here </div> </div> </div> <!-- /col --> </div> <!-- /row --></div>
2 回答
人到中年有點甜
TA貢獻1895條經驗 獲得超7個贊
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="card mb-4 box-shadow h-100">
<div class="card-body">
<p>box 1 data here </p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-4 box-shadow h-100">
<div class="card-body">
<p>box 1 data here </p>
<p>box 2 data here </p>
<p>box 2 data here </p>
</div>
</div>
</div>
</div>
</div>
開心每一天1111
TA貢獻1836條經驗 獲得超13個贊
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="display:flex">
<div class="card mb-4 box-shadow" style="width:100%">
<!-- BOX1 -->
<div class="card-body">
box 1 data here
</div>
</div>
</div>
<!-- /col -->
<div class="col-md-8">
<div class="card mb-4 box-shadow">
<!-- BOX2 -->
<div class="card-body">
<p>box 2 data here</p>
<p>box 2 data here </p>
<p>box 2 data here </p>
</div>
</div>
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
- 2 回答
- 0 關注
- 165 瀏覽
添加回答
舉報
0/150
提交
取消