当前位置: 首页 > web>阅读正文

bootstrap 之 select 组件调节宽高

2022.5.23 朱丰华 2576 次 留下评论 1432字

使用 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>

本篇完,还有疑问?留下评论吧

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注