造型設計 - 對齊文本框和文本區

如上圖所示，我想移動文本框達到與文本區對齊。有我能申請的Bootstrap類嗎？我使用的自舉3.3.6

HTML

   <div class="panel-body"> 
        <div class="col-md-12 col-sm-12"> 
         <div class="row top-buffer"> 
          <div class="col-md-2"> 
           Quote Date: 
          </div> 
          <div class="col-md-2"> 
           <asp:TextBox ID="txtReference" class="form-control" runat="server" ></asp:TextBox> 
          </div> 
          <div class="col-md-2"> 
           Quote Prepared By: 
          </div> 
          <div class="col-md-2"> 
           <asp:TextBox ID="txtCountry" class="form-control" runat="server"></asp:TextBox> 
          </div> 
         </div> 

         <div class="row top-buffer"> 
          <div class="col-md-2"> 
           Reseller: 
          </div> 
          <div class="col-md-2"> 
           <asp:TextBox ID="TextBox1" class="form-control" runat="server" ></asp:TextBox> 
          </div> 
          <div class="col-md-2"> 
           Notes: 
          </div> 
          <div class="col-md-2"> 
           <asp:TextBox ID="TextBox2" class="form-control" runat="server" TextMode="MultiLine" Height="252px" Width="414px"></asp:TextBox> 
          </div> 


         </div> 

         <div class="row top-buffer"> 
          <div class="col-md-2"> 
           Reseller Contact: 
          </div> 
          <div class="col-md-2"> 
           <asp:TextBox ID="TextBox3" class="form-control" runat="server" ></asp:TextBox> 
          </div> 

         </div> 

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

來源

2016-03-02 chamara

則必須將形成兩列。在bootstrap中，'col-md-6'。 –

這是你想要的，一個更清潔，響應式設計。在這裏你的目標是要COL-MD-6列，因爲你是分裂的內容分爲兩列：

調整您的瀏覽器，看看結果： https://jsfiddle.net/L4LtoLsz/

<div class="panel-body"> 
<form class="form-horizontal"> 

    <div class="col-md-6"> 
     <div class="row top-buffer"> 

      <div class="form-group"> 
       <label for="inputEmail1" class="col-sm-3 control-label">Quote Date:</label> 
       <div class="col-sm-9"> 
        <input type="email" class="form-control" id="inputEmail1" placeholder="Quote Date"> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="inputEmail2" class="col-sm-3 control-label">Reseller</label> 
       <div class="col-sm-9"> 
        <input type="email" class="form-control" id="inputEmail2" placeholder="Reseller"> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="inputEmail3" class="col-sm-3 control-label">Reseller Contact:</label> 
       <div class="col-sm-9"> 
        <input type="email" class="form-control" id="inputEmail3" placeholder="Reseller Contact"> 
       </div> 
      </div> 
      </div> 
     </div> 


    <div class="col-md-6"> 
     <div class="row top-buffer"> 

      <div class="form-group"> 
       <label for="inputEmail5" class="col-sm-3 control-label">Quote Prepared By:</label> 
       <div class="col-sm-9"> 
        <input type="email" class="form-control" id="inputEmail5" placeholder="Quote Prepared By"> 
       </div> 
      </div> 

      <div class="form-group"> 
       <label for="tarea" class="col-sm-3 control-label">Notes:</label> 
       <div class="col-sm-9"> 
        <textarea id="tarea" class="form-control"></textarea> 
       </div> 
      </div> 

     </div> 
    </div> 

    </form>

來源

2016-03-02 03:56:36

沒有問題，我也建議你檢查引導網站上的表單示例，使設計更清潔你可以一起刪除標籤，只留下佔位符，這取決於你的應用程序。 –

造型設計 - 對齊文本框和文本區

回答

相關問題