CSS 带有文本选择和按钮的引导输入组

bootstrap input group with text select and button

提问by Alexandre Mélard

I would like to have this using bootstrap css:

我想使用 bootstrap css：

I've written a jsfiddle to make my tests : http://jsfiddle.net/xr4uofje/

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

回答by Mansukh Khandhar

you can put this type of elements

你可以把这种类型的元素

LIVE DEMO

现场演示

HTML

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

CSS

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

JQUERY

查询

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

回答by Zero Zhang

as document said.

正如文件所说。

Avoid using <select>elements here as they cannot be fully styled in WebKit browsers.

避免<select>在此处使用元素，因为它们无法在 WebKit 浏览器中完全设置样式。

so we should use bootstrap's dropdowns with javascript code instead.

所以我们应该使用带有 javascript 代码的引导程序下拉菜单。