将导航栏中搜索框的大小更改为原始大小

时间:2016-05-19 11:23:46

标签: html css twitter-bootstrap

This is how my navbar looks

<form class="navbar-form navbar-left navbar-input-group" role="search" name="basicSearch" id="basicSearch">
  <div class="form-group">
    <div class="input-group" style="">
      <input type="text" id="users" class="form-control" placeholder="Search Customer ...">
      <span style="" class="input-group-btn">
     <button class="btn btn-default" type="button">Go!</button>
     </span>
    </div>
  </div>
</form>

但是搜索框的实际大小是这个 enter image description here

有人可以建议我如何将导航框输入大小更改为默认值

2 个答案:

答案 0 :(得分:1)

将以下几行添加到您的网页

$w=document.getElementById("nav3").offsetWidth;

$("#navBarSearchForm input[type=text]").width($w/2);

它会改变搜索框的长度。

答案 1 :(得分:0)

设置输入框initial的宽度并将按钮浮动到left,因此它位于输入框的旁边。

#users{
  width:initial;  
}

span{
  float:left;  
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<form class="navbar-form navbar-left navbar-input-group" role="search" name="basicSearch" id="basicSearch">
 <div class="form-group">
 <div class="input-group" style="">
 <input type="text" id="users" class="form-control"       placeholder="Search Customer ...">
 <span style=""class="input-group-btn">
 <button class="btn btn-default" type="button">Go!</button>
 </span>                            
  </div>
 </div> 
</form>