Bootstrap 5：使输入文件与其他字段具有相同的高度

Question

我正在使用这个简单的模板来显示带有文件附件字段的注册表单：

/* the problem is here when I try to modify the height for myself */
.mycustom {
  line-height: 2.75;
  z-index: 999;
}

<!-- [email protected] -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    
<!-- code -->
<div class="text-center">
  <div class="container col-xl-10 col-xxl-8 px-4 py-5">
    <main>
      <form class="p-4 p-md-5 border rounded-3 bg-light">
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
          <label for="floatingInput">Email address</label>
        </div>
        <div class="form-floating mb-3">
          <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
          <label for="floatingPassword">Password</label>
        </div>
        <div class="mb-3">
          <input type="file" class="form-control mycustom" id="formFiles" name="files" aria-describedby="inputGroupFileAddon04" aria-label="Upload" required>
        </div>
        <div class="checkbox mb-3">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>            
        <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
        <hr class="my-4">
        <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
      </form>
    </main>
  </div>
</div>

我添加这段CSS以在输入文件中具有相同的高度，但我想知道是否存在指定高度的响应式方法：

.mycustom{
  line-height: 2.75;
  z-index: 999;
}

Answer 1

Bootstrap 框架是使用严格且强大的 CSS 类引用来定义样式而开发的。您可以在另一个问题中了解更多关于它们的优势和更好的理解：为什么属性选择器比类具有更高的特异性？.

链接的答案显示有三个选项可以覆盖原始样式。

解决方案#1 -

!important

如果你想写出清晰易懂的代码，不建议使用这个。然而，如果您需要快速获得结果，这是一个简单的选择。

.mycustom {
  line-height: 200px !important; /* here */
}

.mycustom {
  line-height: 200px !important;
}

<!-- [email protected] -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    
<!-- code -->
<div class="text-center">
  <div class="container col-xl-10 col-xxl-8 px-4 py-5">
    <main>
      <form class="p-4 p-md-5 border rounded-3 bg-light">
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
          <label for="floatingInput">Email address</label>
        </div>
        <div class="form-floating mb-3">
          <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
          <label for="floatingPassword">Password</label>
        </div>
        <div class="mb-3">
          <input type="file" class="form-control mycustom" id="formFiles" name="files" aria-describedby="inputGroupFileAddon04" aria-label="Upload" required>
        </div>
        <div class="checkbox mb-3">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>            
        <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
        <hr class="my-4">
        <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
      </form>
    </main>
  </div>
</div>

解决方案#2 -

inline <div style="...">

不可重复使用。我相信在大多数情况下，可重用性是比内联样式更重要的考虑因素。

<input
  type="file"
  class="form-control"
  style="line-height: 200px;"
  id="formFiles"
  name="files"
  aria-describedby="inputGroupFileAddon04"
  aria-label="Upload"
  required
>

<!-- [email protected] -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    
<!-- code -->
<div class="text-center">
  <div class="container col-xl-10 col-xxl-8 px-4 py-5">
    <main>
      <form class="p-4 p-md-5 border rounded-3 bg-light">
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
          <label for="floatingInput">Email address</label>
        </div>
        <div class="form-floating mb-3">
          <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
          <label for="floatingPassword">Password</label>
        </div>
        <div class="mb-3">
          <!-- here style="..." -->
          <input type="file" class="form-control" style="line-height: 200px;" id="formFiles" name="files" aria-describedby="inputGroupFileAddon04" aria-label="Upload" required>
        </div>
        <div class="checkbox mb-3">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>            
        <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
        <hr class="my-4">
        <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
      </form>
    </main>
  </div>
</div>

解决方案#3 - 与原始规则相比更强的规则（推荐）

如果您喜欢避免使用 !important 并喜欢可重用的 CSS 类而不是内联样式（正如大多数情况下所建议的那样），那么您只需创建与原始格式一样强大的覆盖即可。

/* Original - Strong: 0-1-0 */
.form-control {
  line-height: 1.5;
}

/* Your attempt - Strong: 0-1-0 */
/* equally strong... theoretically it would work, but in practice it doesn't because it's not defined in the original file; therefore, the .form-control defined in the original bootstrap.min.css file, which is loaded earlier, becomes the benchmark --> it can only be overridden with a stronger rule */
.mycustom {
  line-height: 200px !important; /* here */
}

/*How to write a stronger rule? There are various options available to us.*/

/* Defining a stronger rule - Strong: 0-2-0 */
.form-control.mycustom {
  line-height: 200px !important; /* working - overrides the original */
}

/* OR... */

/* Defining a stronger rule - Strong: 0-1-1 */
input.form-control {
  line-height: 200px !important; /* working - overrides the original */
}

/* and many more almost infinite combinations are possible, depending on when you want to apply the override */

.form-control.mycustom {
  line-height: 200px;
}

<!-- [email protected] -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    
<!-- code -->
<div class="text-center">
  <div class="container col-xl-10 col-xxl-8 px-4 py-5">
    <main>
      <form class="p-4 p-md-5 border rounded-3 bg-light">
        <div class="form-floating mb-3">
          <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
          <label for="floatingInput">Email address</label>
        </div>
        <div class="form-floating mb-3">
          <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
          <label for="floatingPassword">Password</label>
        </div>
        <div class="mb-3">
          <input type="file" class="mycustom form-control" id="formFiles" name="files" aria-describedby="inputGroupFileAddon04" aria-label="Upload" required>
        </div>
        <div class="checkbox mb-3">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>            
        <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
        <hr class="my-4">
        <small class="text-muted">By clicking Sign up, you agree to the terms of use.</small>
      </form>
    </main>
  </div>
</div>