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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>

如何调整此select标签的大小

如果可以使用 bootstrap,那么请建议我使用 bootstrap 否则 CSS 的解决方案。

苏迪普托·罗伊

将您的替换widthmax-width,您的选择标签将按预期运行。

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

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

width 无法覆盖这些样式规则,这就是您应该使用的原因 max-width

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章