1

Bootstrap ボタンのドロップダウン メニューが 2 つあります。メニューが 2 行に折り返されないようにするにはどうすればよいですか? スパン クラスを使用してメニューの幅を制御できますが、コードは、次のドロップダウン メニューを次の行に強制する非表示の入力フィールドがさらに存在するかのように動作します。さらに重要な問題は、これらのドロップダウン入力が、実際の幅に関係なく、右側の次の要素でそれらの間に固定量のスペースを強制することです。

最終的には、隣り合わせに配置された入力ボタンと同じように動作するようにしたいと考えています。スクリーンショットを参照してください。

ここに画像の説明を入力

<div class="row-fluid">
    <!--- BASIC INFO --->
    <div class="span12 well" style="height: 160px; background-color:">
        <input type="text" class="input-small" placeholder="Eye Color">
        <input type="text" class="input-mini" placeholder="Hair">
        <div class="input-prepend">
            <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a>aa</a>
                    </li>
                    <li>
                        <a>aa</a>
                    </li>
                    <li>
                        <a>aa</a>
                    </li>
                </ul>
            </div>
            <input class="span4" id="prependedDropdownButton" type="text"  placeholder="Hair">
        </div>
        <div class="input-prepend">
            <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a>mm</a>
                    </li>
                    <li>
                        <a>mm</a>
                    </li>
                    <li>
                        <a>mm</a>
                    </li>
                </ul>
            </div>
            <input class="span4" id="prependedDropdownButton" type="text"  placeholder="Hair">
        </div>
    </div>
</div>
4

1 に答える 1

0

Bootstrap のドキュメントとテストをさらに読んだ後、使用したい種類のドロップダウンが反応しないことに気付きました。ドロップダウンを使用する方が良いと思います<select>。

デモ

http://jsfiddle.net/sulfureous/X8hdg/

HTML

<div class="row-fluid">
  <div class="well clearfix">
    <div class="row-fluid">

      <div class="span3">
        <input type="text" class="span12" placeholder="Eye Color">
      </div><!--.span3-->

      <div class="span3">
        <input type="text" class="span12" placeholder="Hair">
      </div><!--.span3-->

      <div class="span3">
        <select class="span12">
          <option>Hair</option>
          <option>Black</option>
          <option>Blonde</option>
        </select>
      </div><!--.span3-->

      <div class="span3">
        <select class="span12">
          <option>Race</option>
          <option>Race 01</option>
          <option>Race 02</option>
        </select>
      </div><!--.span3-->

    </div><!--.row-fluid-->
  </div><!--.well .clearfix-->
</div><!--.row-fluid-->

これは別の解決策だと思います。コードのインデント、コメントなどをクリーンアップし、その種のレスポンシブ メニューに適していると思われる方法でスパンを分割しました。

clearfix を追加し、インライン スタイルと高さを削除したことに注意してください。

この解決策があなたが期待したものであるかどうか教えてください。それ以外の場合は、使用したい他の種類のドロップダウンを使用して実行できますが、かなりハックする必要があります。Twitter Bootstrap の担当者がその要素を始めましょう。

乾杯。

于 2013-07-27T05:06:02.013 に答える