我浪费了很多时间寻找一种方法来为输入和输入组制作我自己的 xs 大小(小于 small),所以这是代码!/p>
Peter Butkovic将错误/请求上传到 Bootstrap github:
https://github.com/twbs/bootstrap/issues/15107
他们的回复如下:
We won't be adding it to v3 and I don't think we'll have the xs buttons even in v4, but I'll keep it in mind for that if we opt to keep it around.
仍在为 Bootstrap 5 工作
最佳答案
对于较小的输入:
.input-xs {
height: 22px;
padding: 2px 5px;
font-size: 12px;
line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
border-radius: 3px;
}
输入组中的示例用法:
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-xs btn-success">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
<input type="text" class="form-control input-xs" />
<span class="input-group-btn">
<button class="btn btn-xs btn-danger">
<i class="glyphicon glyphicon-minus"></i>
</button>
</span>
</div>
或者,您可以像这样将类添加到输入组:
.input-group-xs>.form-control,
.input-group-xs>.input-group-addon,
.input-group-xs>.input-group-btn>.btn {
height: 22px;
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
}
并使用:
<div class="input-group input-group-xs">
<span class="input-group-btn">
<button class="btn btn-success">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-danger">
<i class="glyphicon glyphicon-minus"></i>
</button>
</span>
</div>
.input-xs {
height: 22px!important;
padding: 2px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.input-group-xs>.form-control,
.input-group-xs>.input-group-addon,
.input-group-xs>.input-group-btn>.btn {
height: 22px;
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-xs btn-success">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
<input type="text" class="form-control input-xs" />
<span class="input-group-btn">
<button class="btn btn-xs btn-danger">
<i class="glyphicon glyphicon-minus"></i>
</button>
</span>
</div>
<br/>
<div class="input-group input-group-xs">
<span class="input-group-btn">
<button class="btn btn-success">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-danger">
<i class="glyphicon glyphicon-minus"></i>
</button>
</span>
</div>
关于css - Bootstrap 3 & Boostrap 4 & Bootstrap 5 - input-xs(小于 sm),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22920589/