Группа ввода Bootstrap не правильно группируется

Question

Я хочу использовать группу ввода, которую я изменил с сайта начальной загрузки.

Это то, что у меня есть

Это то, что я хочу

Это мой код

<div class="input-group"> 
    <input type="text" aria-label="Text input with 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> 

Что я сделал не так? Вот скрипка https://jsfiddle.net/r7ttxr6p/3/

Answer 1

Bootstrap не имеет CSS для этого. Поместите это в вашем CSS:

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

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

Answer 2

<div class="input-group"> 
     <input type="text" class="form-control" aria-label="Text input with segmented button dropdown"> 
     <div class="input-group-btn"> 

     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      <span class="caret"></span> 
      <span class="sr-only">Toggle Dropdown</span> 
     </button> 
     <ul class="dropdown-menu dropdown-menu-right"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
     </ul> 
     <button type="button" class="btn btn-default">Action</button> 
     </div> 
    </div> 

https://jsfiddle.net/zz1k5t3u/

Answer 3

Я надеюсь, вам понравится это. Было глупо досаждать, чтобы понять. Документы не являются лучшими в этом типе разметки. https://jsbin.com/zabocusiti/edit?html,output

<div class="input-group"> 
    <input class="form-control" aria-label="Text input with segmented button dropdown" type="text"/> 

    <div class="input-group-btn"> 

    <button type="button" class="btn btn-default " data-toggle="dropdown" aria-haspopup="true" > 
     <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 role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
    </ul> 

    <button type="button" class="btn btn-default">Action</button> 

    </div> 

</div><!-- /.input-group -->