bootstrap 3.3.4 导航栏上的全宽输入组

Question

我在使用 bootstrap v3.3.4 时遇到了一些问题。我需要像这样获得适合整个导航栏宽度的搜索栏 (v3.0.3)：http://bootply.com/109727 But it feels like there is some troubles with input group and I am getting that (v3.3.4): http://plnkr.co/edit/4UwlbwM1O0zC9jxjXOOn?p=preview 有什么解决方法吗？或者有其他方法可以得到相同的结果吗？

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container" id="navbar-container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Furni.co</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <p class="navbar-btn mr10">
                        <a tabindex="0" class="btn btn-danger" role="button" data-popover-content="#popover_sign_up" data-toggle="popover" >Sign up</a>
                    </p>
                </li>
                <li>
                    <p class="navbar-btn">
                        <a tabindex="0" class="btn btn-default" role="button" data-popover-content="#popover_log_in" data-toggle="popover" >Log in</a>
                    </p>
                </li>
            </ul>
            <form class="navbar-form">
                <div class="form-group" style="display:inline;">
                    <div class="input-group">
                        <span class="input-group-addon go">Go!</span>
                        <input type="text" class="form-control navbar-search" placeholder="Search cnc furniture">
                        <span class="input-group-addon top-bars btn-default">
                            <span class="fa fa-bars"></span>
                            <div class="arrow-container">
                                <span class="fa fa-sort-desc"></span>
                            </div>
                        </span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</nav>

Answer 1

替换以下行

<div class="form-group" style="display:inline;">
    <div class="input-group">

和

<div class="form-group" style="display:inline-block; width:70%">
    <div class="input-group" style="width:100%">

Here 是我通过上述更改得到的

http://plnkr.co/edit/e07Ces01ub81FKwzEqk7?p=preview

bootstrap 3.3.4 导航栏上的全宽输入组

Full width input group on bootstrap 3.3.4 navbar

html

css

twitter-bootstrap-3