时间戳

首页 > 解决方案 > CSS 宽度不适用于 HTML 选择标签

html - CSS 宽度不适用于 HTML 选择标签

问题描述

我正在学习 Bootstrap v5.0。我正在尝试select使用 CSS 调整标签的大小，width但它不起作用。我也尝试了 Bootstrap .col，但它也无法正常工作。

我的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input</title>
</head>
<body>
    <div class="alert bg-light">
        <div class="container">
            <h4 class="alert-heading">Custom file input</h4>
            <hr>
            <div class="input-group">
                <select class="form-select" style="width: 40px;">
                    <option value="1">C</option>
                    <option value="2">C++</option>
                    <option value="3">Java</option>
                    <option value="4">Python</option>
                    <option value="5">JavaScript</option>
                </select>
                <input type="file" class="form-control" multiple>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>

如何调整此select标签的大小？

如果可以使用引导程序，那么请建议我使用引导程序或 CSS 的解决方案。

标签： htmlcsstwitter-bootstrap

解决方案

将您的替换width为max-width，您的选择标签将按预期运行。

Bootstrap 实际上添加了一个样式规则，使宽度select非常流畅。

select {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

width不能覆盖这些样式规则，这就是您应该使用的原因max-width

推荐阅读