Bootstrap 4 - 调整输入字段的宽度
Posted
技术标签:
【中文标题】Bootstrap 4 - 调整输入字段的宽度【英文标题】:Bootstrap 4 - Adjust width of input field 【发布时间】:2019-04-01 02:02:05 【问题描述】:使用这个入门模板如何控制输入宽度?
https://getbootstrap.com/docs/4.1/examples/starter-template/
这是我想缩小的部分
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
我试图将输入包装在一个 div <div class="col-xs-2">
中,但这并没有做任何事情。我有什么选择?
【问题讨论】:
看起来您正在编辑导航栏搜索字段。看看这些:***.com/questions/50750931/…***.com/questions/41574776/…getbootstrap.com/docs/4.1/utilities/spacing 【参考方案1】:管理输入字段宽度的最简单方法就是将w-25
类添加到输入字段。
<input class="form-control w-25" type="text" placeholder="Search" aria-label="Search">
您可以根据需要设置宽度
w-25
w-50
w-75
&
w-100
或 w-auto
w
定义宽度。
【讨论】:
【参考方案2】:解决方案 1:为您的输入元素指定“最大宽度”:
input[type=text]
max-width: 200px;
input[type=button]
max-width: 100px;
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
<input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
</div>
解决方案 2:或者尝试在 select 和 input 中添加 col-* 类。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<form class="row">
<div class="col-10">
<input type="text" name="search" id="search" value="test" placeholder="Search accounts, contracts and transactions" class="form-control">
</div>
<div class="col-2">
<input type="button" name="commit" value="Search" class="btn btn-primary btn-block">
</div>
</form>
【讨论】:
【参考方案3】:您可以通过以下方式在 css 文件中执行此操作:
要放入 css 文件或放入样式标签的 CSS 代码
input
width:50px;
【讨论】:
这将改变所有输入控件的宽度,如果你想改变特定输入字段的宽度,而不是为该字段分配你的自定义类或 id,然后使用该 id/class 来改变宽度以上是关于Bootstrap 4 - 调整输入字段的宽度的主要内容,如果未能解决你的问题,请参考以下文章
Bootstrap 4 - 如何在导航栏中进行 100% 宽度的搜索输入?