gpt4 book ai didi

css - 将多个按钮附加到 Bootstrap 搜索表单

转载 作者:行者123 更新时间:2023-12-04 15:46:24 25 4
gpt4 key购买 nike

使用 Bootstrap,将多个按钮附加到 .form-search 中,使两个附加按钮的右 Angular 变圆。

HTML:

<form class="form-search">
<div class="input-append">
<input type="text" class="span2 search-query">
<button type="submit" class="btn">Quick</button>
<button type="submit" class="btn">Full</button>
</div>
</form>

参见 http://jsfiddle.net/jhfrench/aFYcM/3/

如何调整 CSS,使最后一个按钮为圆 Angular ,中间按钮为“方形”?


只是为了上下文,我可以将多个按钮附加到一个输入,并且只有最右边的按钮有圆 Angular :

<div class="alert alert-success">
Regular input can append two buttons such that the middle button ("Quick") does not have rounded corners:<br />
<form>
<div class="input-append">
<input type="text" class="span2">
<button type="submit" class="btn">Quick</button>
<a href="somewhere.html" class="btn">Full</a>
</div>
</form>
</div>

参见 http://jsfiddle.net/jhfrench/aFYcM/4/

最佳答案

我创建了一个 corresponding issue with Bootstrap ,但它已关闭(“我们不支持它,并且可能会删除 3.0 中执行多个按钮的功能。”-mdo)。所以我制作了自己的 CSS 来解决这个问题(请参阅 http://jsfiddle.net/jhfrench/aFYcM/34/)。

关键是重新定义(为 0).form-search .input-append .fixed-btn* 样式中的 border-radius 声明,并对 执行相同的操作。前置。然后使用 :last-child 选择器声明正确的 border-radius 规范。

.form-search .input-append .fixed-btn, .form-search .input-prepend .fixed-btn {
margin-left: -1px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}

.form-search .input-append .btn:last-child {
-webkit-border-radius: 0 14px 14px 0;
-moz-border-radius: 0 14px 14px 0;
border-radius: 0 14px 14px 0;
}

*--请注意,我为 fiddle 创建了 .fixed-btn,因为我包含了来自 CDN 的 Bootstrap Assets (我无法使用我的更改来编辑 CDN 的 CSS)。对于那些有倾向的人,您可以将这些行添加到您的 style.less 文件中,以将更正内容添加到生成的 CSS 中:

.navbar-search .input-prepend .btn, .navbar-search .input-append .btn {
margin-left: -1px;
.border-radius(0 0 0 0);
}
.navbar-search .input-append .search-query {
.border-radius(14px 0 0 14px);
}
.navbar-search .input-append .btn:last-child {
.border-radius(0 14px 14px 0);
}

关于css - 将多个按钮附加到 Bootstrap 搜索表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14224116/

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