带文本选择和按钮的bootstrap输入组

Question

我想使用bootstrap css:

我写了一个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>

Answer 1

你可以把这种类型的元素

现场演示

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");
}

Answer 2

正如文件所说.

避免<select>在这里使用元素,因为它们无法在WebKit浏览器中完全设置样式.

所以我们应该使用bootstrap的下拉列表来代替javascript代码.