2016-05-18 15 views
0

私はブートストラップ2を使っている古いアプリを持っています。新しい機能のためのワイヤフレームには、ラベルの下に複数行のテキストボックスの横にチェックボックスを置く必要があります。このフォームはブートストラップ2で整列できますか?

この絵は、状況を説明:

enter image description here

私のフィールドはすべて、以下の構成を使用します。私が思うよう

<div class="row-fluid extended-row"> 
    <div class="span6"> 
     <div class="control-group"> 
      <label class="control-label" for="<%=txtMyField.ClientID %>"> 
            My Field</label> 
      <div class="controls"> 
       <asp:TextBox class="input-large" ID="txtMyField" runat="server" ReadOnly="True" /> 
      </div> 
    </div> 
. 
. 
. 
. 
</div> 

だから私は、下のチェックボックスを配置する方法がわかりませんブートストラップでフォームレイアウトを使用しても、コントロールをラベルの横に置くことはできません。 これはブートストラップ2を使って可能ですか?

+2

十分です'.span7'、右に' .pull-right'で並んだチェックボックスがあります。あなたがまだコードを試していないなら、それ以上の具体的なものは得られません。最初に構造体を構築し、解決できないレイアウト問題が発生した場合は、Stack Overflowに質問をしてください。 – Serlite

+0

こんにちは。私は自分の質問を編集し、私が使っている現在のレイアウトを追加しました。あなたが言ったように私は.spanを使ってみましたが、フィールドとそのラベルはフォームの残りの部分に揃っていませんでした。 – groovejet

答えて

0

[OK]を私はこれを行うための方法を見つけました。左入力やチェックボックスがで右側の `.span5`、複数行のテキストボックス内の可能性のように見え、私はまだトップにラベルを揃えることはできませんが、結果は確かに

<div class="control-group"> 
    <div class="control-label"> 
     <label class="control-label" for="<%= txtCommentary.ClientID %>">Commentary</label><br /> 
     <input id="chkRepeatfailure" type="checkbox" runat="server" /> 
    </div> 
    <div class="controls"> 
     <asp:TextBox TextMode="MultiLine" Rows="4" class="input-xlarge" ID="txtCommentary" runat="server" 
          placeholder="" />         
    </div> 
</div> 
1

ブートストラップ2のクラスは覚えていませんが、ブートストラップ3のクラスと似ているはずです。 col-md-offsetクラスを使うか、右に引っ張ってみてください。

offsetting columns in bootstrap3

関連する問題