Question

我在使用bootstrap v3.3.4时遇到了一些麻烦。我需要获得适合导航栏整个宽度的搜索栏，如下所示（v3.0.3）：http://bootply.com/109727但感觉输入组存在一些问题，我得到了（v3.3.4）：{ {3}}有任何想法如何解决这个问题？或者有另一种方法可以获得相同的结果吗？

<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

引导程序3.3.4导航栏上的全宽输入组

1 个答案: