带有文本选择和按钮的引导输入组 [英] bootstrap input group with text select and button

问题描述

我想使用bootstrap css实现此功能：

I would like to have this using bootstrap css:

我写了一个jsfiddle进行测试：
http://jsfiddle.net/xr4uofje/

I've written a jsfiddle to make my tests : 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>

推荐答案

您可以放置​​这种类型的元素

you can put this type of elements

实时演示

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

这篇关于带有文本选择和按钮的引导输入组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！