使用 form-group 控制 select 时宽度太长,如果没有 form-group 则不能得到正确的样式。
让宽度自适应的样式是:
<select class="form-control" style="width:auto;">
...
</select>
通过 width:auto,可实现自适应宽度。
对于组件高度,可适应 input-lg,或 input-sm 获得更大或更小的高度。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bootstrap 101</title>
<link rel="stylesheet" href="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<script src="https://www.52dixiaowo.com/tools/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://www.52dixiaowo.com/tools/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<h2>BootStrap Select 自适应宽度</h2>
<select class="form-control" style="width:auto;">
<option>选项1</option>
<option>选项2221</option>
<option>选项13432423</option>
<option>选项1分34234f</option>
</select>
<hr/>
<h2>调节 select 的高度,使用 input-lg 取得更大的高度</h2>
<select class="form-control input-lg" style="width:auto;">
<option>选项1</option>
<option>选项2221</option>
<option>选项13432423</option>
<option>选项1分34234f</option>
</select>
<hr/>
<h2>调节 select 的高度,使用 input-sm 取得更小的高度</h2>
<select class="form-control input-sm" style="width:auto;">
<option>选项1</option>
<option>选项2221</option>
<option>选项13432423</option>
<option>选项1分34234f</option>
</select>
</body>
</html>
另外,bootstarp 的 select 默认是 display: block,如果需要行内样式,可使用:
<select class="form-control" style="width:auto;display:inline-block;">
...
</select>
本篇完,还有疑问?留下评论吧