如何使两个按钮响应？答案

【问题标题】：How to make two buttons responsive?如何使两个按钮响应？
【发布时间】：2022-12-01 01:52:22
【问题描述】：

我正在使用 Bootstrap 制作两个按钮，这样当屏幕宽度减小时，它们不是水平划分屏幕，而是垂直划分屏幕，如图所示 it should be like this

我试过这个

索引.php：

<div class="container-fluid">
    <div class="row">
        <div class="col-md mw-100 bg-danger"></div>
        <div class="col-md mw-100 bg-success"></div>
    </div>
</div>

CSS:

[class*='col'] {
    min-height: 600px;
}

但是当宽度小于768px时它会在底部溢出，当宽度大于768px时我不知道如何填充按钮下方的空白区域

（对不起英语，我正在使用翻译器）

【问题讨论】：

标签： html responsive bootstrap-5

【解决方案1】：

您可以使用 col-xs-12 和 col-md-6 来获得这种行为。

在整页中查看结果并尝试减小屏幕尺寸。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class='container-fluid'>
  <div class='row'>
    <div class='col-xs-12 col-md-6'>
      <button class='btn btn-primary'>Button 1</button>
     </div>
    <div class='col-xs-12 col-md-6'>
      <button class='btn btn-danger'>Button 2</button>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

我想你错过了你的 col div。尝试这个：

<div class="container-fluid">
    <div class="row">
        <div class="col-md">
            <button class="btn btn-danger"></button>
        </div>
        <div class="col-md">
            <button class="btn btn-success"></button>
        </div>
    </div>
</div>

【讨论】：