Question

我需要制作固定大小的bootstrap input-group，这里是JS Fiddle链接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

如果您使用的是bootstrap，则可以使用网格。比如col-xs-{num} col-sm-{num} col-md-{num} col-lg-{num}.(in bootstrap 3)

DEMO HERE

Answer 2

＆＃13;

<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>    
 	    </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>

＆＃13;

试试这个。

这可能会对你有所帮助。

感谢。

bootstrap`input-group`固定大小

2 个答案: