我的导航栏中有一个占用大量空间的表单。但是,输入的值是数字的并且相对较小,因此输入框本身不需要几乎与它们一样长。
如何缩小它们?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Brand</a>
</div>
<form class="navbar-form navbar-left">
<div class="form-group">
<!-- How do I shrink these inputs? -->
<input class="form-control" placeholder="0123456789" name="value1" type="text">
</div>
<div class="form-group">
<input class="form-control" placeholder="0123456789" name="value2" type="text">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
答案 0 :(得分:1)
在Bootstrap中没有内置方法可以做到这一点。看看这个thread。
您可以自己定义CSS规则或更改Bootstrap类。这是您希望在bootstrap.css / bootstrap.min.css中更改的规则。此规则指定浏览器宽度超过768px时的宽度。在此更改它将允许媒体规则在较小设备上的响应能力仍然有效。
@media(min-width: 768px){
.navbar-form .form-control {
display: inline-block;
width: auto; <---- Change this e.g. width: 100px;
vertical-align: middle;
}
}