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>

我希望输入框在usere聚焦搜索时变大，但在左边像堆栈的搜索栏一样。我在第一时间尝试了以下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

如果我正确理解你 - 请考虑fiddle。我不认识你的其他css styles，但你可以创造你的小提琴并向我们展示。

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

焦点上的Bootstrap和搜索输入宽度更改

2 个答案: