Question

我正在尝试这个Bootstrap示例，在左列有一个表，在右列有2行的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>def@somemail.com</td>
		      </tr>      
		      <tr class="table-primary">
		        <td>Primary</td>
		        <td>Joe</td>
		        <td>joe@example.com</td>
		      </tr>
		      <tr class="table-primary">
		        <td>Primary</td>
		        <td>Joe</td>
		        <td>joe@example.com</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>

它看起来像这样：左列高度会随着工作台高度自动调整，这很好。问题是右列没有根据左列调整其高度。我希望右侧列的高度与左侧列的高度相关，即均匀地分成2个堆叠的列，并且应该根据左侧列的宽度自动调整：说我有更多的表行，左侧列的高度肯定会增加，但右列高度也应增加，并且仍应为左列高度的50％。所以看起来像这样：

Answer 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

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

1 个答案: