引导和搜索输入宽度改变焦点答案

【问题标题】：Bootstrap and search input width change on focus引导和搜索输入宽度改变焦点
【发布时间】：2013-11-07 18:30:25
【问题描述】：

我正在使用 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 时停止，使其更具动态性？

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

如果我正确地理解了你 - 采取这个fiddle。我不知道你的其他 css styles，但你可以创建你的小提琴并展示给我们。

【讨论】：

bootply.com/92406 当用户关注输入框时，它向右增长，然后移动到正确的位置。我希望它向左增长并使用过渡效果

【解决方案2】：

原因是，你也应该给正常状态宽度。

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;
}

【讨论】：