Bootstrap 3 & Boostrap 4 & Bootstrap 5 - input-xs (小于 sm)

Posted

技术标签:

【中文标题】Bootstrap 3 & Boostrap 4 & Bootstrap 5 - input-xs (小于 sm)【英文标题】:Bootstrap 3 & Boostrap 4 & Bootstrap 5 - input-xs (smaller than sm) 【发布时间】:2014-05-20 04:16:52 【问题描述】:

我浪费了很多时间来寻找一种方法来为输入和输入组制作我自己的 xs 大小(小于 small),所以这里是代码!


2014/11/14 更新

Peter Butkovic 将错误/请求上传到引导 github:https://github.com/twbs/bootstrap/issues/15107

他们的回复如下:

我们不会将它添加到 v3 中,我认为我们不会有 xs 即使在 v4 中也有按钮,但如果我们选择这样做,我会记住这一点 保留它。

仍在为 Bootstrap 5 工作

【问题讨论】:

【参考方案1】:

对于较小的输入:

.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>

【讨论】:

我会将高度更改为 23px。如果你放大到 400%,你会发现它更合适。【参考方案2】:

如果你使用bootstrap-sass,那么你可以利用input-size mixin:

$input-height-xs: 27px; // adjust it according to your theme.

@include input-size('.input-xs', $input-height-xs, $padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $input-border-radius-small);

【讨论】:

我想这一定是个评论。 @LeandroTupone 为什么,因为它很短?我倾向于不同意,因为它回答了问题。 因为是为了sass 我没有看到任何新内容 那是开头所说的。他们有一个官方的 sass 版本,v4 是用 sass 编写的。许多人在 Sass 中使用 bootstrap。所以我认为这无关紧要。如果您认为这是正确的做法,您仍然可以标记答案。

以上是关于Bootstrap 3 & Boostrap 4 & Bootstrap 5 - input-xs (小于 sm)的主要内容,如果未能解决你的问题,请参考以下文章

bootstrap2&3

无法解决依赖关系。 “jQuery 2.1.4”与“bootstrap 3.3.6 约束:jQuery (≥ 1.9.1 && < 3.0.0)”不兼容

bxSlider & Bootstrap 3 - 百分比幻灯片宽度

带有可折叠侧导航和 Bootstrap 3 的幻影间距

Bootstrap 3中带有容器流体和容器的网格

Firefox 中 bootstrap 3.3.5 中的字形图标存在一些问题