Bootstrap：设置div的高度相对于另一个div的高度？

问题描述 投票：0回答：1

我正在尝试这个Bootstrap示例，左列中有一个表，右列中有两列中有4列。这是代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-6" style="background-color:lavender">
				<p>Table which is hovered, stripped, bordered, contextual</p>            
			  <table class="table table-hover table-striped table-bordered">
		    <thead>
		      <tr>
		        <th>Firstname</th>
		        <th>Lastname</th>
		        <th>Email</th>
		      </tr>
		    </thead>
		    <tbody>
		      <tr>
		        <td>Default</td>
		        <td>Defaultson</td>
		        <td>[email protected]</td>
		      </tr>      
		      <tr class="table-primary">
		        <td>Primary</td>
		        <td>Joe</td>
		        <td>[email protected]</td>
		      </tr>
		      <tr class="table-primary">
		        <td>Primary</td>
		        <td>Joe</td>
		        <td>[email protected]</td>
		      </tr>
		    </tbody>
		  </table>
			</div>
			<div class="col-lg-6">
				<div class="row">
					<div class="col-md-6" style="background-color:lavenderblush">
						<p>Some text</p>
					</div>
					<div class="col-md-6" style="background-color:lavender;">
						<p>Some text</p>
					</div>
		  	</div>
		  	<div class="row">
					<div class="col-md-6" style="background-color:lavender">
						<p>Some text</p>
					</div>
					<div class="col-md-6" style="background-color:lavenderblush;">
						<p>Some text</p>
					</div>
		  	</div>
		  </div>
		</div>
	</div>
</body>

它看起来像这样：enter image description here左栏高度自动调整表高，这很好。问题是右栏没有根据左栏调整其高度。我希望右列高度相对于左列高度，即均匀分成2个堆叠列，这应该根据左列宽度自动调整：说我有更多的表行，左列高度肯定增加但右栏高度也应增加，仍然是左栏高度的50％。所以它看起来像这样：

enter image description here

javascript html css bootstrap-4
1个回答
1
投票

基本上，你会想要一些flexbox魔法。您可以将flexbox设置添加到Bootstraps row和col-，但这实际上是不好的做法。我做了一些测试，并在快速的代码中无法逃避这一点，但有了更多的时间和对flexbox的理解，你可以解决问题。最佳做法是始终设置新元素，永远不要自定义任何BS网格元素的CSS。这意味着永远不要向.row或.col-等元素添加类，除非你扩展这些组件。

说明：第二个col-有正确的高度，但它的孩子没有（.row），所以你必须使第二个col-成为flexbox元素（从而让它的孩子知道它的高度）并让孩子们（现在是flexbox）项目）增长（平均分配）。但同样，这不是一个好的做法，因为你不应该使用BS组件，他们有自己的属性，可能会以不希望的方式重叠。

TL：DR：将display:flexbox添加到第二个col-xx-x并使其中的.row与flex-grow:1一起生长，但是应该研究它以获得更好的代码标准。

Code to working result on codepen

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.