Question

将此字体Google Font Cairo与 select 文本一起使用会使内部文本部分隐藏，例如向下移动一点。删除引导程序时不存在该问题。

尝试了不同版本的Bootstrap 4。

JSFiddle示例https://jsfiddle.net/pgmx87jv/17/

<select class="form-control"  style="font-family: 'Cairo', sans-serif;">
  <option>Village</option>
  <option>ggg</option>
  <option>Vvv</option>
</select>

为什么会发生以及如何解决？

Answer 1

您可以更改选择的form-control上的填充。这是因为Cairo字体比Bootstrap的默认字体高。

<select class="form-control pt-0">
  <option>Village</option>
  <option>ggg</option>
  <option>Vvv</option>
</select>

https://jsfiddle.net/m1d5oayu/

或者，使用h-auto类按照@ IvanS95的建议设置height:auto。

<select class="form-control h-auto">
  <option>Village</option>
  <option>ggg</option>
  <option>Vvv</option>
</select>

Bootstrap选择文本未以某些字体居中-导致部分字符被部分隐藏

1 个答案: