diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 0a825f5acbc6338ce2f85e21a8fb92772d0d589c..11b08109317e7888c724fdc454795785023dac9a 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1703,7 +1703,9 @@ select:focus:required:invalid:focus {
.input-append .add-on,
.input-prepend .add-on,
.input-append .btn,
-.input-prepend .btn {
+.input-prepend .btn,
+.input-append .btn-group > .dropdown-toggle,
+.input-prepend .btn-group > .dropdown-toggle {
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
@@ -1736,9 +1738,9 @@ select:focus:required:invalid:focus {
border-radius: 4px 0 0 4px;
}
-.input-append input + .btn-group .btn,
-.input-append select + .btn-group .btn,
-.input-append .uneditable-input + .btn-group .btn {
+.input-append input + .btn-group .btn:last-child,
+.input-append select + .btn-group .btn:last-child,
+.input-append .uneditable-input + .btn-group .btn:last-child {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
@@ -1751,7 +1753,8 @@ select:focus:required:invalid:focus {
}
.input-append .add-on:last-child,
-.input-append .btn:last-child {
+.input-append .btn:last-child,
+.input-append .btn-group:last-child > .dropdown-toggle {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
diff --git a/docs/base-css.html b/docs/base-css.html
index dd34401d547b098d6407706264a64e31bb9ded4f..bd04e53d6fdd0bee0134e2897560f84548c1bc08 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -1323,6 +1323,54 @@ For example, <code><section></code> should be wrapped as inlin
</ul>
</div>
</div>
+</pre>
+
+ <h4>Segmented dropdown groups</h4>
+ <form class="bs-docs-example">
+ <div class="input-prepend">
+ <div class="btn-group">
+ <button class="btn" tabindex="-1">Action</button>
+ <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ <input type="text">
+ </div>
+ <div class="input-append">
+ <input type="text">
+ <div class="btn-group">
+ <button class="btn" tabindex="-1">Action</button>
+ <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a href="#">Action</a></li>
+ <li><a href="#">Another action</a></li>
+ <li><a href="#">Something else here</a></li>
+ <li class="divider"></li>
+ <li><a href="#">Separated link</a></li>
+ </ul>
+ </div>
+ </div>
+ </form>
+<pre class="prettyprint linenums">
+<form>
+ <div class="input-prepend">
+ <div class="btn-group">...</div>
+ <input type="text">
+ </div>
+ <div class="input-append">
+ <input type="text">
+ <div class="btn-group">...</div>
+ </div>
+</form>
</pre>
<h4>Search form</h4>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 6fc646e8c86f2a2c91fdd649c728a1687d70dbdb..e9377026ac492e38e805d5aeef34ea20db914d4c 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1260,6 +1260,54 @@
</ul>
</div>
</div>
+</pre>
+
+ <h4>{{_i}}Segmented dropdown groups{{/i}}</h4>
+ <form class="bs-docs-example">
+ <div class="input-prepend">
+ <div class="btn-group">
+ <button class="btn" tabindex="-1">Action</button>
+ <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+ <li class="divider"></li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+ </ul>
+ </div>
+ <input type="text">
+ </div>
+ <div class="input-append">
+ <input type="text">
+ <div class="btn-group">
+ <button class="btn" tabindex="-1">Action</button>
+ <button class="btn dropdown-toggle" data-toggle="dropdown" tabindex="-1">
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu">
+ <li><a href="#">{{_i}}Action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+ <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+ <li class="divider"></li>
+ <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+ </ul>
+ </div>
+ </div>
+ </form>
+<pre class="prettyprint linenums">
+<form>
+ <div class="input-prepend">
+ <div class="btn-group">...</div>
+ <input type="text">
+ </div>
+ <div class="input-append">
+ <input type="text">
+ <div class="btn-group">...</div>
+ </div>
+</form>
</pre>
<h4>{{_i}}Search form{{/i}}</h4>
diff --git a/less/forms.less b/less/forms.less
index 0f3f425edcfc86faf9060ee618194b4c36db379a..739b40d11e7dac2469ce97bde531b17923500656 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -462,7 +462,8 @@ select:focus:required:invalid {
border: 1px solid #ccc;
}
.add-on,
- .btn {
+ .btn,
+ .btn-group > .dropdown-toggle {
vertical-align: top;
.border-radius(0);
}
@@ -489,7 +490,7 @@ select:focus:required:invalid {
select,
.uneditable-input {
.border-radius(@inputBorderRadius 0 0 @inputBorderRadius);
- + .btn-group .btn {
+ + .btn-group .btn:last-child {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}
@@ -499,7 +500,8 @@ select:focus:required:invalid {
margin-left: -1px;
}
.add-on:last-child,
- .btn:last-child {
+ .btn:last-child,
+ .btn-group:last-child > .dropdown-toggle {
.border-radius(0 @inputBorderRadius @inputBorderRadius 0);
}
}