Bootstrap列小屏幕失效：按钮不显示且需垂直排列的解决方法

你的核心问题是按钮使用绝对定位导致脱离文档流，加上Bootstrap列仅设置了col-md-4，小屏幕下列布局失效，最终按钮重叠无法正常显示。按照以下步骤修改即可实现小屏幕下按钮垂直排列：

1. 调整HTML的Bootstrap列类 #

给每个按钮所在的div添加响应式列类，确保小屏幕下列占满整行：

<body>
  <div class="top">
    <div class="content">
      <h1>Welcome To <br /><span class="fancy">Fantasy Talk</span></h1>
      <div class="row">
        <div class="col-md-4 col-sm-12 mb-4">
          <button onClick="window.location.href='dothraki.html';">
            Dothraki
          </button>
        </div>

        <div class="col-md-4 col-sm-12 mb-4">
          <button onClick="window.location.href='valyrian.html'; ">
            Valyrian
          </button>
        </div>

        <div class="col-md-4 col-sm-12">
          <button onClick="window.location.href='sindarin.html';">
            Sindarin
          </button>
        </div>
      </div>
    </div>
  </div>
</body>

• col-sm-12：屏幕宽度小于768px时，每个列占12格（整行）
• mb-4：给列添加底部外边距，让垂直排列的按钮有间距

2. 修复CSS中按钮的定位问题 #

移除按钮的绝对定位属性，改为让按钮在列中居中显示：

button{
    font-family: 'Almendra SC', serif;
    transition: 0.5s;
    padding: 15px 60px;
    text-decoration: none;
    font-size: clamp(16px, 2vw, 24px); /* 控制字体大小范围，适配不同屏幕 */
    border-radius: 5px;
    border: 1px solid transparent; /* 补全边框属性 */
    transition: all 0.2s ease-in-out;
    color: rgba(255, 255, 255, 0.8);
    background: #146C94;
    display: block; /* 让按钮块级显示，方便居中 */
    margin: 0 auto; /* 水平居中 */
}

• 移除position: absolute、top: 50%、transform: translate(-50%, -50%)：这些属性让按钮脱离文档流，导致列布局失效
• clamp(16px, 2vw, 24px)：确保小屏幕下字体不太小，大屏幕也不会过大
• display: block + margin: 0 auto：让按钮在列中水平居中

3. 优化小屏幕下的整体布局（可选） #

给.top类添加box-sizing: border-box，避免padding导致的页面溢出：

.top{
    width: 100%;
    height: 100%;
    padding: 2rem;
    box-sizing: border-box; /* 添加这行 */
    position:absolute;
    background-image: url(image/img1.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    animation: change 13s infinite ease-in-out;
}

修改完成后，大屏幕下按钮保持三列排列，小屏幕下自动切换为垂直单列，每个按钮占满整行且有合适间距。

内容的提问来源于stack exchange，提问作者Zuhaib Ayaz