我正在学习 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 的解决方案。
将您的替换width
为max-width
,您的选择标签将按预期运行。
Bootstrap 实际上添加了一个样式规则,使宽度select
非常流畅。
select {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
width
无法覆盖这些样式规则,这就是您应该使用的原因 max-width
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句