Bootstrap 和搜索输入宽度在焦点上发生变化

Question

我正在使用 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 时停止，以便更有活力？

Answer 1

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