适配屏幕尺寸的Bootstrap响应式按钮实现咨询

你的按钮现在是固定尺寸，无法随屏幕自适应，核心问题是CSS里硬编码了固定的宽高和内边距。下面是具体的修改方案：

关键修改点 #

• 删掉CSS中固定的width:200px和height:35px，固定尺寸会直接阻止按钮随父容器缩放
• 把固定像素的padding换成相对单位（比如rem），或者直接用Bootstrap的内置padding类（如py-3 px-4），让内边距随屏幕尺寸比例调整
• 字体大小改用相对单位（如rem），替代固定的font-size: large，保证在小屏幕上字体不会过大
• 保留Bootstrap的btn-block类，它会让按钮占满父容器宽度，这是实现响应式的基础

修改后的代码 #

HTML部分

<button type="button" class="btn btn-block m-0" kendoButton id="btnLogin1" *ngIf="!opened"
        (click)="open()">Login</button>

CSS部分

#btnLogin1 {
  background-color: #0057b8;
  border: 1px solid #0057B8;
  color: #fff !important;
  /* 移除固定宽高 */
  /* width: 200px; */
  /* height: 35px; */
  font-size: 1.1rem; /* 相对单位适配不同屏幕 */
  margin: 35px 0 0;
  padding: 0.8rem 2rem; /* 相对单位内边距 */
  font-weight: 700;
  border-radius: 10px;
}

/* 可选：针对小屏幕（手机端）微调样式 */
@media (max-width: 576px) {
  #btnLogin1 {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
  }
}

效果说明 #

修改后按钮会自动填充父容器的宽度，内边距和字体大小会按屏幕比例自适应。如果需要针对特定尺寸的屏幕做更细致的调整，可以用Bootstrap的断点（如576px、768px）添加媒体查询，自定义对应屏幕下的样式。

内容的提问来源于stack exchange，提问作者Shrutika Jaiswal