web-dev-qa-db-ja.com

ブートストラップセレクト付き入力グループアドオン

ラベル2をブートストラップ選択とともに使用しようとしましたが、ブートストラップ（ラベル1）とは異なります1。以下のコードの2つのラベルを同じように表示する方法はありますか？

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Test</title>

    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css">
    <link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">

  </head>

  <body>

    <div class="container">
      <div class="col-lg-6">
        <div class="input-group">
          <span class="input-group-addon">Labe 1</span>
          <input type="text" class="form-control" name="snpid" placeholder="Test">
          <span class="input-group-btn">
            <button class="btn btn-default" type="submit">GO!</button>
          </span>
        </div><!-- /input-group -->
      </div><!-- /.col-lg-6 -->  
    <div>    
    <BR/>
    <HR>

  <div class="container">
    <form class="form-inline">
      <div class="form-group">
        <span class="input-group-addon">Label 2</span>
      </div>
      <div class="form-group">
        <select id="lunch" class="selectpicker" 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>
      </div>
    </form>
    <div>  

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
    <script>
      $('.selectpicker').selectpicker();
    </script>
  </body>
</html>
jquerytwitter-bootstraptwitter-bootstrap-3bootstrap-select
27
user977828

From Bootstrap docs ：

テキストベースの<input>の前、後、または両側にテキストまたはボタンを追加して、フォームコントロールを拡張します。 .input-groupを.input-group-addonまたは.input-group-btnとともに使用して、単一の.form-controlに要素を追加または追加します。

selectと.input-group-addonを.input-groupでラップする必要があります。

<div class="input-group">
  <span class="input-group-addon">Label 2</span>
  <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>
</div>

見てみな：

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">Labe 1</span>
      <input type="text" class="form-control" name="snpid" placeholder="Test">
      <span class="input-group-btn">
      <button class="btn btn-default" type="submit">GO!</button>
      </span>
    </div>
  </div>
  <br>
  <hr>
  <div class="container">
    <form class="form-inline">
      <div class="input-group">
        <span class="input-group-addon">Label 2</span>
        <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>
      </div>
    </form>
  </div>
</div>
45
Johan Karlsson

選択ボタンがそれぞれのコーナーで丸みを帯びるように、追加のCSSでcaethのソリューションを変更しました。

[〜＃〜] html [〜＃〜]

<form class="form-inline">
    <div class="input-group">
        <span class="input-group-addon">Label</span>
        <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>
    </div>
</form>

[〜＃〜] css [〜＃〜]

.input-group > .input-group-btn:last-child > .selectpicker {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.input-group > .input-group-btn:first-child > .selectpicker {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

こちらをご覧ください： http://jsfiddle.net/xr4uofje/130/

19
Liau Jian Jie

Selectにアドオンを含める簡単な方法を見つけました（bootstrap-selectなし）。この回答は、ブートストラップ選択の質問に厳密に関連しているわけではありませんが、この回答を探してここに着いた人にとっては役に立つかもしれません（私がしたように）。アドオンの下にある選択範囲をマージン：-4pxで移動し、このように幅に4ピクセルを追加します

.input-group select.form-control {
    margin-left: -4px;
    width: calc(100% + 4px);
}

次に、次のようにアドオンに相対位置とz-indexを設定します。

.input-group .input-group-addon {
    z-index: 5;
    position: relative;
}

これが役立つことを願っています

0
Alex Santana