web-dev-qa-db-ja.com

bootstrapテキスト選択とボタンを持つ入力グループ

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>
csscss3twitter-bootstraptwitter-bootstrap-3
20
Alexandre Mélard

あなたはこのタイプの要素を置くことができます

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

ドキュメントとして said 。

使用を避ける <select>要素は、WebKitブラウザーでは完全にスタイル設定できないためです。

そのため、代わりにJavaScriptコードでブートストラップのドロップダウンを使用する必要があります。

5
Zero Zhang