gpt4 book ai didi

html - twitter bootstrap input-group-addon 和 btn-group 没有很好地对齐

转载 作者:太空狗 更新时间:2023-10-29 13:44:38 25 4
gpt4 key购买 nike

我有一个选择项,我从
http://silviomoreto.github.io/bootstrap-select/ 应用了选择器功能
现在我正在尝试将 input-group-addon 与 select 对齐,它变成了 btn-group,但是插件的高度永远不会与 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;
}

关于html - twitter bootstrap input-group-addon 和 btn-group 没有很好地对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18077945/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com