如何制作bootstrap form-inline水平可滚动

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

如果您希望水平滚动到表单，请添加此项 INSERT INTO [dbo].[Users] ([UserID] ,[FullName] ,[Username] ,[Password] ,[City] ,[Phone] ,[Status] ,[CreatedDate]) VALUES (2 ,'krisha mohan' ,'krishna' ,'krishna@123' ,'hyderabad' ,'868613986' ,1 ,'2017-10-06 16:43:10' ) GO 到此课程overflow: scroll; height: 400px;

根据您的代码，

.portlet.light