2

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

4

1 回答 1

6

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

.form-search .input-append .fixed-btn关键是在* 样式中重新定义（为 0）border-radius 声明，并对.prepend. 然后使用选择器声明正确的边界半径规范:last-child。

.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);
}
于 2013-01-08T21:12:24.720 回答