首页 > 解决方案 > Bootstrap:选择下面的标签截断文本

问题描述

我有一个奇怪的样式问题,其中选择标签内的选定选项文本本身隐藏了一半。我正在使用 bootstrap 4 和“luxbootstrap.min.css”样式。下面是我的 HTML 代码

<div class="container">
  <h1 class="text-center">My Racks</h1>>
  <div class="form-group">
    <select class="form-control" id="rack" [(ngModel)]="rack">
      <option [value]="rack" *ngFor="let rack of racks">{{rack}}</option>
    </select>
  </div>
</div>

在此处输入图像描述

在此处输入图像描述

看起来这个 luxbootstrap 主题在表单控件中有额外的填充。

在此处输入图像描述

在此处输入图像描述

解决方案:我在 style.css 中添加以下代码段

select.form-control {
    padding: 0;
}

所有帮助表示赞赏...

标签: htmlcssbootstrap-4angular7

解决方案


我认为选择框填充有问题


推荐阅读