Question

我在理解和制作Twitter bootstrap导航栏时遇到了问题。我想在最右边找到一个“关于”链接，但无论浏览器窗口大小如何，它都会跳到新行。

            <nav id="navbar" class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">
                        <!--img alt="Brand" src="images/logo-38-38.gif"-->App Name
                    </a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <form class="navbar-form" role="search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" ng-model="filter.searchPhrase">
                            <span class="input-group-btn">
                                <a class="btn btn-default" type="button" href="#items"><i class="glyphicon glyphicon-search"></i></a>
                            </span>
                        </div><!-- /input-group -->
                        <button class="btn btn-link btn-sm" type="button" 
                             data-toggle="collapse" 
                             data-target="#collapseExample" 
                             aria-expanded="false" 
                             aria-controls="collapseExample"
                        >Show/Hide filter</button>
                    </form>
                    <p class="navbar-text">
                        <a href="#about">About <i class="glyphicon glyphicon-info-sign"></i></a>
                    </p>
                </div>

            </div><!--/.container-fluid -->

        </nav>

Answer 1

使用nav navbar-nav类在div中创建表单。同样适用于About链接使用类nav navbar-text navbar-right

<nav id="navbar" class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">
                            <!--img alt="Brand" src="images/logo-38-38.gif"-->App Name
                        </a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <div class="nav navbar-nav">
                    <form class="navbar-form" role="search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search" ng-model="filter.searchPhrase">
                                <span class="input-group-btn">
                                    <a class="btn btn-default" type="button" href="#items"><i class="glyphicon glyphicon-search"></i></a>
                                </span>
                            </div><!-- /input-group -->
                            <button class="btn btn-link btn-sm" type="button" 
                                 data-toggle="collapse" 
                                 data-target="#collapseExample" 
                                 aria-expanded="false" 
                                 aria-controls="collapseExample"
                            >Show/Hide filter</button>
                        </form>
                    </div>

                        <div class="nav navbar-text navbar-right">
                            <a href="#about">About <i class="glyphicon glyphicon-info-sign"></i></a>
                        </div>
                    </div>

                </div><!--/.container-fluid -->

            </nav>

<强> FIDDLE

为什么导航栏文本项目转移到新行？

1 个答案: