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

时间:2013-01-08 21:12:25

标签: css twitter-bootstrap

使用Bootstrap,向.form-search添加多个按钮会使两个附加按钮的右角都圆。

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以便只有最后一个按钮获得圆角而中间按钮是“方形”?


仅为上下文,我可以在输入中附加多个按钮,只有最右边的按钮才能获得圆角:

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

1 个答案:

答案 0 :(得分:6)

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

关键是要重新定义(到0).form-search .input-append .fixed-btn *样式中的border-radius声明,并对.prepend执行相同操作。然后使用: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;
}

* - 请注意我为小提琴创建了.fixed-btn,因为我从CDN中包含了Bootstrap资源(我不能用我的更改来编辑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);
}