bootstrap 列在移动设备上相互重叠

Question

我有以下代码

<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；然而，在较小的屏幕上，第二列与日历列重叠。当屏幕尺寸 < 1024px 时，如何确保它们不重叠。

Answer 1

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

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

Answer 2

您需要用 div 包裹列，给出 class 名称 (.row) 行。在 .clo-md-3 div 中使用日历 class 制作另一个 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;
}

bootstrap 列在移动设备上相互重叠

bootstrap columns overlapping each other on mobile

html

css

bootstrap-4