首先，我根本不知道我应该做什么样的研究。所以我可能问了一个重复的问题。
不管怎么说，我有一个这样的简单代码:
null
#my-container {
height: 100vh;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div id="my-container" class="container-fluid p-0 m-0">
<div class="row p-0 m-0 h-100 text-white">
<div class="col-sm-8 bg-success">COL 1</div>
<div class="col-sm-4 bg-danger">COL 2</div>
</div>
</div>null
如你所见，我有两列8乘4的比例，覆盖整个页面。正如你所知，当在这些小设备上观察时，它以1:1的比例出现在2行中。像这样:
col-sm-8和col-sm-4指定列的宽度，而不是它们的高度。如果希望列的高度具有特定的比率，则需要在css@media查询中明确定义列的高度，如以下所示:
null
#my-container {
height: 100vh;
}
@media(max-width: 600px) {
#my-container .col-sm-8 {
height: 66.66%;
}
#my-container .col-sm-4 {
height: 33.33%;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div id="my-container" class="container-fluid p-0 m-0">
<div class="row p-0 m-0 h-100 text-white">
<div class="col-sm-8 bg-success">COL 1</div>
<div class="col-sm-4 bg-danger">COL 2</div>
</div>
</div>