当小设备视图时引导不同的高度比期望列为 1:1

Question

首先，我不知道我应该做什么样的研究。 所以我可能问了一个重复的问题。

无论如何，我有一个像这样的简单代码：

 #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>

如您所见，我有 2 列，比例为 8 x 4，覆盖了整个页面。 如您所知，在这些小型设备上查看时，它会以 1:1 的比例出现在 2 行中。 像这样：

但是我想要这两列不同的高度比。 例如，像这样 (8:2)：

Answer 1

col-sm-8和col-sm-4指定列的宽度，而不是它们的高度。 如果您希望列的高度处于特定比例，则需要通过在 css @media查询中明确定义它们的高度来进行调整，如下所示：

 #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>