html - Bootstrap input group not grouping properly -


i want use input group i've modified bootstrap site.

this have

current design

this want

wanted design

this code

<div class="input-group">     <input type="text" aria-label="text input segmented button dropdown" class="form-control">     <div class="input-group-btn">         <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">             <span class="caret"></span>             <span class="sr-only">toggle dropdown</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" role="separator"></li>             <li><a href="#">separated link</a></li>         </ul>         <button class="btn btn-default" type="button">action</button>     </div> </div> 

what have done wrong? here fiddle https://jsfiddle.net/r7ttxr6p/3/

bootstrap has no css that. put in css:

.input-group-btn:last-child > .btn:not(:last-child).dropdown-toggle {   border-radius: 0; } 

http://jsfiddle.net/ubdoyn6z/1/


Comments

Popular posts from this blog

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -

YouTubePlayerFragment cannot be cast to android.support.v4.app.Fragment -