bootstrap`輸入組`固定大小

Question

我需要使用固定大小的引導input-group，這裏是JS小提琴鏈接https://jsfiddle.net/ncxge6md/1/，基本上我需要調整頁面調整大小時的輸入字段。

<ul class="nav navbar-nav navbar-left"> 

     <li 
     <form class="navbar-form" > 
     From Date:<br>  
     <div class="form-group"> 
     <div class='input-group date' id='datetimepickerFrom'> 
      <input id = "date_idFrom" type='text' class="form-control" placeholder="From Date" /> 
      <span class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </span> 
      </div> 
     </div> 
     </form> 
    </li> 

    </br> 
    <br> 


     <li 
     <form class="navbar-form" role="search"> 
     City:<br> 
     <div class="input-group"> 
      <input autocomplete="off" id = "city_id" type="text" class="form-control" placeholder="City" name="q"> 
     </div> 
     </form> 
     </li> 

     </li> 

    </ul> 

Answer 1

如果您使用的是引導，您可以使用網格。 像col-xs-{num} col-sm-{num} col-md-{num} col-lg-{num}.(in bootstrap 3)

DEMO HERE

Answer 2

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/> 
 
<ul class="nav navbar-nav navbar-left"> 
 

 
    <li> 
 
     <form class="navbar-form"> 
 
      <div class="col-md-12">From Date:<br> 
 
       <div class="form-group"> 
 
        <div class='input-group date' id='datetimepickerFrom'> 
 
         <input id = "date_idFrom" type='text' class="form-control" placeholder="From Date" /> 
 
         <span class="input-group-addon"> 
 
          <span class="glyphicon glyphicon-calendar"></span> 
 
         </span> 
 
        </div> 
 
       </div> 
 
      </div>  
 
    \t  </form> 
 
    </li></br> <br> 
 
    <li> 
 
     <form class="navbar-form" role="search"> 
 
      <div class="col-md-12">City:<br> 
 
       <div class="input-group"> 
 
        <input autocomplete="off" id = "city_id" type="text" class="form-control" placeholder="City" name="q"> 
 
       </div> 
 
      </div> 
 
     </form> 
 
    </li> 
 

 
</ul>

試試這個。

這可能對你有幫助。

謝謝。