css - Bootstrap 导航栏聚焦在 Canvas 外扩展搜索框

Question

我使用bootstrap并在导航栏上有一个搜索框(如屏幕截图所示)，当该框获得焦点时，它将扩展到一定宽度的值，但宽度无法适合容器( Canvas 外)，并且扩展过渡不会从右到左，这正是我想要的，

能解决吗？

HTML

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-left">
        <li class="hidden">
            <a href="#top"></a>
        </li>
        <li>
            <a class="page" href="#">item1</a>
        </li>
        <li>
            <a class="page" href="#">item2</a>
        </li>
    </ul>

    <form class="navbar-form navbar-right" role="search">
    <div class="input-group stylish-input-group">
        <span class="input-group-addon">
            <button type="submit"><span class="glyphicon glyphicon-search"></span></button>  
        </span>
        <input type="text" class="form-control input-sm searchbox" placeholder="Search">
    </div>
    </form>
    <!-- /.search -->

</div>

CSS

.stylish-input-group .input-group-addon{
    background: #fff !important;
    padding: 5px !important;
}
.stylish-input-group .form-control{
    border-right: 0;
    border-left: 0;
    box-shadow: 0 0 0; 
    border-color: #ccc;
}
.stylish-input-group button{
    border: 0;
    background: transparent;
}

input.searchbox {
    width: 130px !important;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    transition: width 0.3s;
}

input.searchbox:focus {
    width: 130% !important;
    -webkit-transition: width 0.5s;
    -moz-transition: width 0.5s;
    transition: width 0.5s;
}

Answer 1

问题是，您忘记在导航中添加一行。这是固定代码:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="row">
    <div class="col-lg-12">
        <ul class="nav navbar-nav navbar-left">
            <li class="hidden">
                <a href="#top"></a>
            </li>
            <li>
                <a class="page" href="#">item1</a>
            </li>
            <li>
                <a class="page" href="#">item2</a>
            </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
            <div class="input-group stylish-input-group">
                <span class="input-group-addon">
                    <button type="submit">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </span>
                <input type="text" class="form-control input-sm searchbox" placeholder="Search">
            </div>
        </form><!-- /.search -->
    </div> <!-- /.col -->
</div> <!-- /.row -->

希望它有效:)