我有一个选择项目,我已经从
http://silviomoreto.github.io/bootstrap-select/开始应用selectpicker功能
现在我正在尝试将输入组插件与选择对齐,后者变为btn组,
然而,插件的高度永远不会与btn-group的高度相同,我使用的是twitter bootstrap 3.
任何可以告诉我如何做到这一点的人,我的代码是：
现在我正在尝试将输入组插件与选择对齐,后者变为btn组,
然而,插件的高度永远不会与btn-group的高度相同,我使用的是twitter bootstrap 3.
任何可以告诉我如何做到这一点的人,我的代码是：
<div class="input-group">
<span id="contact_servicecode" class="input-group-addon ng-binding">CONTACT_SERVICECODE</span>
<div class="btn-group bootstrap-select">
<button class="btn dropdown-toggle btn-custom" data-toggle="dropdown" type="button">
<div class="filter-option pull-left">1</div>
<div class="caret"></div>
</button>
<div class="dropdown-menu open">
<ul class="dropdown-menu inner" role="menu">
</div>
<select class="selectpicker mobile-device" style="display: none;">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
解决方法
这是我的jsbin,我是如何解决它的.
jsbin
当您将输入组大小设置为“input-group-lg”或“input-group-sm”时,它将为您提供预定义的大小 – 最明显的是输入的高度分别为46px或30px.但是,如果您接受常规尺寸,则无任何反应.我想如果您对Bootstrap之外的输入进行设置,那么您就不会感到惊讶.
以下是lg的示例测量
.input-group-lg > .input-group-btn > .btn {
height: 46px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
事实上,我没有调整lg,而是创建了一个名为’input-group-reg’的类,它使用的测量值是bootstrap给出的’lg’和’sm’之间的中间点.
.input-group-reg > .form-control {
height: 38px;
padding: 8px 13px;
font-size: 14px;
line-height: 1.44;
border-radius: 6px;
}
/* Sizing the input */
.default-input-group-lg > form-control {
height: 38px;
padding: 8px 13px;
font-size: 14px;
line-height: 1.44;
border-radius: 6px;
}
/* Sizing the button */
.input-group-reg > .input-group-btn > .btn,.input-group-reg > .input-group-btn:last-child > .dropdown-toggle{
height: 38px;
padding: 8px 13px;
font-size: 14px;
line-height: 1.44;
border-radius: 6px;
}
