为什么我的输入框中的文本和选择框在 Bootstrap 5 中没有对齐/填充？答案

【问题标题】：Why aren't the texts in my input box and select box aligned/padded equally in Bootstrap 5?为什么我的输入框中的文本和选择框在 Bootstrap 5 中没有对齐/填充？
【发布时间】：2021-12-30 01:42:11
【问题描述】：

我正在努力解决一个我无法解决或理解的问题。我有一个带有一个文本输入和一个选择下拉列表的表单。我正在使用 Bootstrap 5，我想减少所有表单控件中的默认左填充。因此，我在样式定义中添加了padding-left:0.3rem。这是我的示例代码：

.form-control,
.form-select {
  padding-left: 0.3rem;
}

<head>
  <title>Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <div class="container">
    <form style="width:200px">
      <label for="name" class="form-label">Name:</label>
      <input type="text" class="form-control" id="name" name="name" value="John">

      <label for="country" class="form-label">Country:</label>
      <select class="form-select" id="country" name="country">
        <option>USA</option>
        <option>South Africa</option>
        <option>Sweden</option>
        <option>Netherlands</option>
      </select>
    </form>
  </div>
</body>

我期望“John”和“USA”在其表单控件中与相同的填充对齐的结果。但是看看下面的图片。 “USA”比“John”多。为什么会这样，我该如何解决？

更新：在不同的浏览器上测试后，我了解到问题只出现在 Firefox 上。在 Chrome 和 Edge 上，填充/对齐似乎是正确的。所以，现在我想知道我是否可以使用一些 CSS 技巧让它也能在 Firefox 上运行？

【问题讨论】：

Doesn't occur for me in Firefox on Win10 使用上面的 sn-p。也许它已经被修复了。投票结束，因为不可复制。

标签： css bootstrap-5

【解决方案1】：

这与选择或输入元素无关。这是关于您正在编写的字符，例如“U”在某些字体中在其顶部有一条额外的线，使其周围有空格。也许使用其他字体可以解决您的问题。

【讨论】：

不，事实并非如此。如果我输入“日本”而不是“美国”，它将生成相同的缩进，即使它以与“约翰”相同的字符开头

【解决方案2】：

为您的标签使用以下 css。

.form-label {
      margin-left: 0.3rem;
}

【讨论】：

也可以使用“padding-left: 0.3rem”。
这只会对齐标签。我关心输入/选择字段中文本的对齐/填充。该问题仅出现在 Firefox 中 - 而不是 Edge/Chrome。

【解决方案3】：

也为<option> 元素添加负边距。您在 .form-select 上添加了左侧填充，以从框的左侧创建一点空间。您现在还可以将margin-left: -10px 添加到<option> 以使其向左一点吗？或者在 Name 输入上添加额外的几个像素填充。

【讨论】：

【解决方案4】：

您正在使用rem 作为相对大小的填充。所以实际大小会有所不同。尝试删除padding-left。

<html>
<head>
    <title>Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
   
</head>
<body>
    <div class="container">
        <form style="width:200px">
            <label for="name" class="form-label">Name:</label>
            <input type="text" class="form-control" id="name" name="name" value="John">
    
            <label for="country" class="form-label">Country:</label>
            <select class="form-select" id="country" name="country">
                <option>USA</option>
                <option>South Africa</option>
                <option>Sweden</option>
                <option>Netherlands</option>
            </select> 
        </form>
    </div>
</body>
</html>

现在差距会小很多，即使实际上还没有对齐。

【讨论】：

这不适用于 Firefox。即使只有 2-3 个像素，不同的边距仍然存在问题。
就像我说的，我只是缩小了差距。我也在使用 Firefox，结果如下imgur.com/a/fBGisEQ。