0

Bootstrap内で編集可能なインラインフォームを作成しようとしています。流動的な行を使用しているときに、レイアウトにコントロールを設定できないようです。上部にいくつかの見出しが必要であり、正しく整列させる方法がわかりません。

アイデアを説明するjsfiddleをフォークしました。ご覧のとおり、コントロールが重なっていますが、これは素晴らしいことではありません。もともとインラインフォームの前に私はテーブルを使おうとしていましたが、さまざまな入力コントロールが実際には満足していないことに気づきました。

<div id="wrapper" class="container-fluid">
<div class="row-fluid">
<form id="frmOptions" method="post" class="well form-inline span12">

     <div class="row-fluid">   
        <div id="formLeft" class="span3">
          <div class="control-group">
            <label for="select1" class="control-label">Option 1:</label>
            <div class="controls">
                <select id="select1">
                    <option>Something</option>
                </select>
                    <select id="select1">
                    <option>Something</option>
                </select>
            </div>      
          </div>
        </div>

        <div id="formCenter" class="span3">
          <div class="control-group">
            <label for="select2" class="control-label">Option 2:</label>
            <div class="controls">
                <select id="select2">
                    <option>Something</option>
                </select>
                 <select id="select2">
                    <option>Something</option>
                </select>
            </div>      
          </div>    
        </div>

        <div id="formRight" class="span3">
          <div class="control-group">
            <label for="select3" class="control-label">Option 3:</label>
            <div class="controls">
                <select id="select3">
                    <option>Something</option>
                </select>
                <select id="select3">
                    <option>Something</option>
                </select>
            </div>      
          </div>    
    </div>   

</form>
</div>
</div>

誰かがこれを修正する方法について何か提案がありますか？必要に応じてブートストラップセレクターhttp://silviomoreto.github.com/bootstrap-select/を使用するつもりですが、まだ試していません。

4

2 に答える 2

3

span12クラスを<select>要素に追加します: http://jsfiddle.net/kaleb/CdNef/244/

これにより、オーバーラップが修正されます。これがあなたが探しているものであることを願っています。

于 2013-03-01T18:16:02.913 に答える
0

選択ボックスを希望どおりに配置するには、次の操作を実行できます。

JSfiddleデモ

 .form-inline select {
 margin-bottom:10px;
 }
 @media (min-width: 768px) and (max-width: 979px) {
#frmOptions select {
     width:100%;
    }
    }
 @media (max-width: 767px) {
#frmOptions select {
     width:100%
    }
   }
 @media (max-width: 480px) {
  #frmOptions select {
     width:100%;
    }
  }

ところで、この方法でもフォームを作成できたと思いますが、後で役立つかもしれません

フォームjsfiddle

于 2013-03-01T18:05:07.907 に答える