ブートストラップをフォームインラインでスクロールする方法

Question

フォームが大きすぎますscrollable私のフォームは大きすぎます。これどうやってするの？

HTML：

<div id="item_group"> 
    <div class="form-group form-md-line-input" style=""> 
     <label>Item</label> 
     <select class="form-control " data-live-search="true" name="" id="" style=""> 
     <option>Select Item</option> 
     <option value="23">Styler King 6 Card Holder (Set of 1, Khaki)</option> 
     </select> 
    </div> 
    <div class="form-group form-md-line-input" style=""> 
     <label>Unit</label> 
     <select class="form-control " data-live-search="true" name="" id="" style=""> 
     <option>Select Unit</option> 
     <option value="1">Piece</option> 
     <option value="2">Box</option> 
     <option value="4">Sub Box</option> 
     </select> 
    </div> 
    <div class="form-group form-md-line-input"> 
     <input type="number" class="form-control" id="form_control_1" name="" style="" value="0"> 
     <label for="form_control_1">Quantity</label> 
    </div> 
    <div class="form-group form-md-line-input"> 
     <input type="number" class="form-control" id="form_control_1" name="" style="" value="0"> 
     <label for="form_control_1">Sale Rate</label> 
    </div> 
    <div class="form-group form-md-line-input"> 
     <input type="number" class="form-control" id="form_control_1" name="" style="" value="0"> 
     <label for="form_control_1">Discount</label> 
    </div> 
    <div class="form-group form-md-line-input"> 
     <input type="number" class="form-control" id="form_control_1" name="" style="" value="0"> 
     <label for="form_control_1">CGST</label> 
    </div> 
    <div class="form-group form-md-line-input"> 
     <input type="number" class="form-control" id="form_control_1" name="" style="" value="0"> 
     <label for="form_control_1">SGST</label> 
    </div> 
    <div class="form-group form-md-line-input"> 
     <input type="number" class="form-control" id="form_control_1" name="" style="" value="0"> 
     <label for="form_control_1">IGST</label> 
    </div> 
    <div class="form-group form-md-line-input"> 
     <input type="number" class="form-control" id="form_control_1" name="" style="" value="0"> 
     <label for="form_control_1">Net Rate</label> 
    </div> 
    <div class="form-group form-md-line-input"> 
     <input type="number" class="form-control" id="form_control_1" name="" style="" value="0"> 
     <label for="form_control_1">Net Amount</label> 
    </div> 
    <input type="hidden" value="1" id="total_item"> 
    <div class="col-md-12" style="padding-left: 0px; padding-right: 0px"> 
     <div class="form-actions noborder"> 
     <button class="btn blue" style="width: 100%;" onclick="addnewitem()"><i class="fa fa-plus"></i>Add New Item</button> 
     </div> 
    </div> 
</div> 

URL：

http://vsss.co.in/Admin/index.php/Sales

インラインフォーム画像

Answer 1

あなたはあなたに水平スクロールが必要な場合

.portlet.light { 
padding: 12px 20px 15px; 
background-color: #fff; 
overflow: scroll; 
height: 400px; 
}