Загрузочная группа загрузки с выбором текста и кнопкой

Я хотел бы иметь это, используя bootstrap css:

bootstrap input group

Я написал jsfiddle для моих тестов: http://jsfiddle.net/xr4uofje/

<div class="container">
  <div class="col-lg-6">
    <div class="input-group">
      <input class="input-group-addon" size="8" type="text">
      <span class="input-group-btn">
        <select class="form-control"></select>
        <button type="button" class="btn btn-default">Get</button>
      </span>
    </div>
  </div>
</div>

Ответы

Ответ 1

вы можете поместить этот тип элементов

LIVE DEMO

HTML

<div class="container">
    <div class="col-lg-6">
        <div class="input-group my-group"> 
            <input type="text" class="form-control" name="snpid" placeholder="Test"/>
            <select id="lunch" class="selectpicker form-control" data-live-search="true" title="Please select a lunch ...">
                <option>Hot Dog, Fries and a Soda</option>
                <option>Burger, Shake and a Smile</option>
                <option>Sugar, Spice and all things nice</option>
                <option>Baby Back Ribs</option>
                <option>A really really long option made to illustrate an issue with the live search in an inline form</option>
            </select> 
            <span class="input-group-btn">
                <button class="btn btn-default my-group-button" type="submit">GO!</button>
            </span>
        </div>
    </div>
<div>

CSS

.my-group .form-control{
    width:50%;
}

JQuery

if ( $.browser.webkit ) {
    $(".my-group-button").css("height","+=1px");
}

Ответ 2

в качестве документа сказал.

Избегайте использования элементов <select> здесь, поскольку они не могут быть полностью разработаны в браузерах WebKit.

поэтому мы должны использовать выпадающие окна bootstrap с кодом javascript.