Twitter bootstrap 引导搜索栏转换无法正常工作

我试图为我的搜索栏获得一个很好的过渡效果，但是由于某些原因，每个过渡都从0px宽度的状态开始和结束。有人知道这是什么原因吗？多谢各位

代码如下：

CSS

HTML

切换导航




























提交

#searchBox

没有提到它的宽度。请尝试下面的代码

#searchBox {
  width: 175px;
    border-radius: 15px;
    -webkit-transition: width 0.30s linear 0s;
       -moz-transition: width 0.30s linear 0s;
        -ms-transition: width 0.30s linear 0s;
         -o-transition: width 0.30s linear 0s;
            transition: width 0.30s linear 0s;
}
#searchBox:focus {
    width: 300px;
}

---

演示

真好！谢谢。那么，澄清一下，到底是什么问题？bootstrap不是已经在它自己的CSS文件中定义了一个宽度吗？再次感谢。@user2327670输入没有提到宽度。转换应该同时具有这两个值。通常情况下，引导不会提及固定的，因为引导是基于响应的。希望你能理解：）

    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/home"><img src="/images/logo.png" width="35px"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="/home"><span class="glyphicon glyphicon-home"></span> Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">New <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">New Tour</a></li>
                <li class="divider"></li>
                <li><a href="#">New Guide</a></li>
                <li><a href="#">New Hotel</a></li>
                <li><a href="#">New Restaurant</a></li>
                <li><a href="#">New Attraction</a></li>
                <li class="divider"></li>
                <li><a href="#">Something else</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">View <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Tours</a></li>
                <li class="divider"></li>
                <li><a href="#">Guides</a></li>
                <li><a href="#">Hotels</a></li>
                <li><a href="#">Restaurants</a></li>
                <li><a href="#">Attractions</a></li>
                <li class="divider"></li>
                <li><a href="#">Something else</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" id="searchBox" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{user.name}} <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Account</a></li>
                <li class="divider"></li>
                <li><a href="#">My Tours</a></li>
                <li class="divider"></li>
                <li><a href="/logout">Logout</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

#searchBox {
  width: 175px;
    border-radius: 15px;
    -webkit-transition: width 0.30s linear 0s;
       -moz-transition: width 0.30s linear 0s;
        -ms-transition: width 0.30s linear 0s;
         -o-transition: width 0.30s linear 0s;
            transition: width 0.30s linear 0s;
}
#searchBox:focus {
    width: 300px;
}