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重要なのは、 *スタイルのborder-radius宣言を（0に）再定義し、。に対しても同じことを行うことでし.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;
}

*-CDNからのブートストラップアセットを含めているため、フィドル用に作成したことに注意してください.fixed-btn（変更を加えて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 に答える