29

Bootstrap 2 (dead link) を使用して、このデモのようにインラインで入力と選択オプションを互いに接続しようとしています。

Bootstrap 3のガイドラインに従って、私はこれを行うことができます:

<div class="container">
    <div class="col-sm-7 pull-right well">
      <form class="form-inline" action="#" method="get">
        <div class="form-group col-sm-5">
          <input class="form-control" type="text" value="" placeholder="Search" name="q">
        </div>
        <div class="form-group col-sm-3">
          <select class="form-control" name="category">
              <option>select</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
          </select>
        </div>
        <button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
      </form>
    </div>
</div>

レスポンシブですが、厄介な css ハックなしでは入力と選択を接続できません。ボタンが添付された例がたくさん見つかりましたが、選択要素では機能しません。

4

9 に答える 9

16

純粋な Bootstrap コードで実行できます。

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

<div class="form-group">
  <label for="id" class="col-md-2 control-label">ID</label>
  <div class="input-group">
    <span class="input-group-btn">
      <select class="form-control" name="id" id="id">
        <option value="">
      </select>
    </span>
    <span class="input-group-btn">
      <select class="form-control" name="nr" id="nr">
        <option value="">
      </select>
    </span>
  </div>	
</div>

于 2014-12-09T13:45:24.543 に答える
10

G_money およびインライン ドロップダウンを使用した入力テキストに対するこの優れたソリューションに対するその他の提案に感謝します...ここに別の優れたソリューションがあります。

<form class="form-inline" role="form" id="yourformID-form" action="" method="post">
    <div class="input-group">
        <span class="input-group-addon"><i class="fa fa-male"></i></span>

        <div class="form-group">
            <input size="50" maxlength="50" class="form-control" name="q" type="text">          
        </div>

        <div class="form-group">
            <select class="form-control" name="category">
                <option value=""></option>
                <option value="0">select1</option>
                <option value="1">select2</option>
                <option value="2">select3</option>
            </select>           
        </div>
    </div>
</form>

これは Bootstrap 3 で動作します: 選択ドロップダウンで入力テキストをインラインで許可します。下はこんな感じ・・・。

ここに画像の説明を入力

于 2014-04-10T07:14:07.767 に答える
3

古い質問に対する別の答え。ただし、ここで役立つ可能性のあるブートストラップ専用に作成された実装を見つけました。これが探している人の助けになることを願っています...

ブートストラップ選択

于 2014-04-07T07:54:39.337 に答える
1

spacebean の回答に基づいて、この変更により、ユーザーが別のアイテムを選択したときに表示されるテキストも変更されます (a と同じ<select>ように)。

http://www.bootply.com/VxVlaebtnL

HTML:

<div class="container">
  <div class="col-sm-7 pull-right well">
    <form class="form-inline" action="#" method="get">
      <div class="input-group col-sm-8">
        <input class="form-control" type="text" value="" placeholder="Search" name="q">
        <div class="input-group-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="mydropdowndisplay">Choice 1</span> <span class="caret"></span></button>
          <ul class="dropdown-menu" id="mydropdownmenu">
            <li><a href="#">Choice 1</a></li>
            <li><a href="#">Choice 2</a></li>
            <li><a href="#">Choice 3</a></li>
          </ul>
          <input type="hidden" id="mydropwodninput" name="category">
        </div><!-- /btn-group -->
      </div>
    <button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
    </form>
  </div>
</div>

Jクエリ:

$('#mydropdownmenu > li').click(function(e){
  e.preventDefault();
  var selected = $(this).text();
  $('#mydropwodninput').val(selected);
  $('#mydropdowndisplay').text(selected);
});
于 2015-08-02T20:41:33.957 に答える
0

これは、追加のcssまたはjqueryを使用せずに作成した方法です:

<div class="form-group">
    <div class="input-group">
        <label class="sr-only" for="extra3">Extra name 3</label>
        <input type="text" id="extra3" class="form-control" placeholder="Extra name">
        <span class="input-group-addon">
            <label class="checkbox-inline">
               Mandatory? <input type="checkbox" id="inlineCheckbox5" value="option1">
            </label>
        </span>
        <span class="input-group-addon">
             <label class="checkbox-inline">
               Per person? <input type="checkbox" id="inlineCheckbox6" value="option2">
             </label>
        </span>
        <span class="input-group-addon">
            To be paid? 
            <select>
                <option value="online">Online</option>
                <option value="on spot">On Spot</option>
            </select>
        </span>
    </div>
</div>
于 2014-03-07T16:56:12.830 に答える
-1

これは少し古いことは知っていますが、同じ問題があり、検索でここにたどり着きました。2 つの select 要素と 1 つのボタンをすべてインラインで配置したかったのですが、これは 2 では機能しましたが 3 では機能しませんでした<form class="form-inline">...</form>。これは実際に私にとって完璧に機能しました。

于 2014-03-20T16:43:12.640 に答える