使两者形成组引导的形式垂直成直列

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纳入到表单域。