5

我正在使用 bootstrap 3 创建我的导航栏。我还需要在导航栏上放置一个搜索栏。所以我的代码看起来像这样

<div class="navbar navbar-default">     
    <a class="navbar-brand">Logo Image</a>
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Calendar</a></li>
    <li><a href="#">Customerr</a></li>
    <li><a href="#">Providers</a></li>                  
    </ul>
    <form class="navbar-form navbar-right" action="">
    <div class="form-group">
        <input type="text" class="form-control mac-style" name="Search" id='nav-search' placeholder="Search">
    </div>
    <input type="submit" name="search" value="Search" class="btn btn-default" > 
    </form>
</div>

当用户专注于搜索时，我希望输入框变大，但像堆栈的搜索栏一样向左。我一开始尝试了以下css

.mac-style:focus{
    width: 500px;
}

并且输入框向左增长但过渡非常粗糙。所以我尝试像这样添加过渡属性（webkit moz o 默认）

 .mac-style:focus{
    width: 500px;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition:width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
}

但是输入将宽度更改为向右移动到搜索按钮后面并离开导航栏。何我可以让它像没有过渡的 css 一样（向左增长）。我的导航栏的创建方式，有没有办法让它在到达最后一个 li 时停止，这样它就更有活力了？

4

2 回答 2

4

如果我正确地理解了你——拿这个小提琴。我不知道你的其他人css styles，但你可以创建你的小提琴并向我们展示。

于 2013-11-07T10:19:26.933 回答
3

原因是，您也应该将宽度赋予正常状态。

JSFIDDLE：http: //jsfiddle.net/surjithctly/mdXqr/

.mac-style {
    width: 100px;
    -webkit-transition: width 1s ease-in-out;
    -moz-transition:width 1s ease-in-out;
    -o-transition: width 1s ease-in-out;
    transition: width 1s ease-in-out;
 }

.mac-style:focus{
    width: 260px;
}
于 2013-11-07T10:30:25.267 回答