如何调整Bootstrap 3输入组的宽度

时间:2019-01-16 21:59:51

标签: css twitter-bootstrap-3

如何调整引导程序输入组的宽度,并使它仍然具有响应性。例如,我只希望数量输入字段占描述字段的x%(小得多)。另外,如何在移动设备上包装每个输入字段?预先感谢,对不起,我是菜鸟。

<div class="container">
  <div class="col-lg-1"></div>
<div class="col-lg-10">
  <div class="panel panel-danger">
    <div class="panel-heading text-center"><strong>Store Transfer</strong></div>

 <div class="panel-body">
   <div class="col-lg-12">

     <div class="form-group">
     <div class="input-group"> <span class="input-group-addon">Description</span>
       <input type="text" class="form-control input-sm" placeholder="Item Description">

       <span class="input-group-addon">Quantity</span>
       <input type="text" class="form-control input-sm" placeholder="Quantity">

       <span class="input-group-addon">Cost</span>
       <input type="text" class="form-control input-sm" placeholder="Cost">

       <span class="input-group-addon">Total $0.00</span>
       </div>

     </div>
   </div>

    <div class="col-lg-2"></div>   
    <div class="col-lg-8">
   <div class="form-group">

    <div class="input-group"><span class="input-group-addon">Transfer From:</span>

    <select class="form-control form-control-sm">
                        <option value="store" disabled="" selected="" class="">Select Store</option>
                        <option value="Richfield" class="">Richfield</option>
                        <option value="Eagan" class="">Eagan</option>
  </select>

  <span class="input-group-addon">Transfer To:</span>

   <select class="form-control">
                        <option value="store" disabled="" selected="" class="">Select Store</option>
                        <option value="Richfield" class="">Richfield</option>
                        <option value="Eagan" class="">Eagan</option>
  </select>

  <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span>

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-success" type="button">Submit</button>
  </span>
  </div>
</div>






   </div>
   <div class="col-lg-2"></div>
    </div>

 </div>

  </div>

BootPly Here

Pic of panel

0 个答案:

没有答案