使兩者形成組引導的形式垂直成直列

Question

如何引導垂直形式創建表單組內嵌好聽？

我可以創建的內聯，但填充是凌亂的，

<div class="form-group "> 
       <div class="col-sm-6"> 
        <label for="date">Date Invoice:</label> 
        <input class="form-control" placeholder="Tanggal Invoice (Harus diisi)" type="text"> 
       </div> 
       <div class="col-sm-6" > 
        <label for="date">Date Invoice:</label> 
        <div class="input-group"> 
         <input type="text" class="form-control" placeholder="Search for..."> 
         <span class="input-group-btn"> 
          <button class="btn btn-primary" type="button">Go!</button> 
         </span> 
        </div> 
       </div> 
      </div> 

這裏是小提琴：JSFIDDLE，它如此讚賞任何幫助。

Answer 1

請試試這個。

<style> 
    .form-group { 
     margin-bottom: 10px; 
     padding: 10px; 
    } 

    </style> 

    <form role="form"> 


      <input type="hidden" name="id" value=""> 

      <div class="box-body"> 
       <div class="form-group clearfix"> 
     <div class="col-sm-12"> 
        <label for="bill">Bill :</label> 
        <textarea class="form-control" rows="5" id="bill" name="bill" required=""></textarea> 
       </div> 
</div> 

       <div class="form-group clearfix"> 
        <div class="col-sm-6"> 
         <label for="date">Date Invoice:</label> 
         <input type="text" placeholder="Tanggal Invoice (Harus diisi)" class="form-control"> 
        </div> 
        <div class="col-sm-6"> 
         <label for="date">Date Invoice:</label> 
         <div class="input-group"> 
          <input type="text" placeholder="Search for..." class="form-control"> 
          <span class="input-group-btn"> 
           <button type="button" class="btn btn-primary">Go!</button> 
          </span> 
         </div> 
        </div> 
       </div> 

       <div class="form-group clearfix"> 
    <div class="col-sm-12"> 
        <label for="berita">Berita :</label> 
        <textarea class="form-control" rows="5" id="berita" name="berita"></textarea> 
       </div> 
</div> 

       <div class="form-group clearfix"><div class="col-sm-12"> 
        <label for="date">Detail:</label> 
        <table id="list4" class="table table-bordered"> 
         <thead> 
          <tr> 
           <th style="width: 40%">Description</th> 
           <th style="width: 20%">Quantity</th> 
           <th style="width: 20%;">Price (IDR)</th> 
           <th style="width: 5%">Act</th> 
          </tr> 
         </thead> 

         <tbody> 
          <tr class="list4_var"> 
           <td><input type="text" name="list4_description_0" class="form-control" required=""></td> 
           <td><input type="text" name="list4_quantity_0" class="form-control" required=""></td> 
           <td><input type="text" name="list4_price_0" class="form-control money-inputmask" required="" style="text-align: right"></td> 
           <td class="del_area04"><button class="list4_del">Delete</button></td> 
          </tr> 
         </tbody> 
        </table> 
        <a href="javascript:void(0)" class="list4_add btn btn-success">Tambah</a><br> 
    </div></div> 


      </div><!-- /.box-body --> 

      <div class="box-footer table-responsive"> 
       <div class="form-group"> 
        <div class="col-sm-12"> 
         <div class="form-group text-center"> 
          <button class="btn btn-primary " id="submit" type="submit">Submit</button> 
          <button class="btn btn-danger " type="reset">Reset</button> 
         </div> 

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

      </form> 

用途：

類的形式組非常久遠clearfix引導class.Accoring到屏幕上，我們可以添加LG，SM，MD後的

COL-SM，XS納入到表單域。