Bootstrap 3 - input-xs（小于sm） [英] Bootstrap 3 - input-xs (smaller than sm)

问题描述

我浪费了很多时间搜索一种方式来为输入和输入组制作自己的xs大小（小于小）， 所以这里的代码！ / p>

---

更新2014/11/14

Peter Butkovic 将错误/请求上传到引导github：

https://github.com/twbs/bootstrap/issues/15107

与他们的以下响应：

我们不会将它添加到v3，我不认为我们会有xs
按钮甚至在v4，但我会记住，如果我们选择
保持它。

解决方案

对于输入smallers：

  .input-xs {
 height：22px; 
 padding：2px 5px; 
 font-size：12px; 
 line-height：1.5; / *如果输入的占位符向上移动，请rem /修改此。 * / 
 border-radius：3px; 
} 
  

input-group中的示例用法：

 < 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 =textclass =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& 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 =textclass =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 =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 =textclass =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 =textclass =form-control/> < span class =input-group-btn> < button class =btn btn-danger> < i class =glyphicon glyphicon-minus>< / i> < / button> < / span>< / div>  

I wasted a lot of time searching a way to make my own xs size (smaller than the small) for input and input group, so here's the code!

---

Update 2014/11/14

Peter Butkovic upload the bug/request to the bootstrap github:
https://github.com/twbs/bootstrap/issues/15107

with the following response from theirs:

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.

解决方案

For inputs smallers:

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

Sample usage in input-group:

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

Alternatively you can add class to the input-group like this one:

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

and use:

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

这篇关于Bootstrap 3 - input-xs（小于sm）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！