引导列在移动设备上相互重叠答案

【问题标题】：bootstrap columns overlapping each other on mobile引导列在移动设备上相互重叠
【发布时间】：2022-01-31 22:03:38
【问题描述】：

我有以下代码

<div class="container">
 <div class="col-md-3 calendar">
 </div>
 <div class="col-md-9">
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
 </div>
</div>

这是我的CSS

.日历{ 最小宽度：447px； }

日历 div 的最小宽度为 400px；但是，在较小的屏幕上，第二列与日历列重叠。当屏幕尺寸为

【问题讨论】：

移除最小宽度或使用更大的列。
@Sean 仍然不起作用
创建一个minimal reproducible example。
你是否在容器的两个子 div 上使用任何边距？
下面的列成行，你直接把它们粘到一个容器里。

标签： html css bootstrap-4

【解决方案1】：

您需要用 div 包装列，并给出类名 (.row) 行。在 .clo-md-3 div 中创建另一个带有日历类的 div。并将宽度与 %

一起使用

<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="calendar">Calendar</div>
        </div>
        <div class="col-md-9">
            <button>Button text</button>
        </div>
    </div>
</div>

CSS 代码示例：

.calendar { 
    min-width: 30%; 
    background: #000;
    color: #ffffff;
    padding: 10px;
    display: inline-block;
}

【讨论】：

【解决方案2】：

你可以像这样简单地使用它。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-3 bg-dark text-white">col-9</div>
  <div class="col-9 bg-info">col-3</div>
</div>

【讨论】：