Question

我试图重做一个引导程序导航但是不能使用行和列来包装到两行。我有以下代码（和示例屏幕截图（用于示例徽标））

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="row"> <---- added this
            <!-- Brand and toggle are grouped for better mobile display -->
            <div class="navbar-header page-scroll col-md-2"> <---added col-md-2
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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 page-scroll" href="#page-top"><img src="img/logo.png" alt="logo" /></a>
                <!--<a class="navbar-brand page-scroll" href="#page-top"></a>-->
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse col-md-10" id="bs-example-navbar-collapse-1"> <---added col-md-10
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="page-scroll" href="#services">Tandems</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Charities <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="videobackground.html">NW Air Ambulance</a></li>
                            <li><a href="icons.html">Alder Hey Imagine</a></li>
                            <li><a href="typography.html">Clatterbridge</a></li>
                            <li><a href="pricingtables.html">We are Macmillan</a></li>
                        </ul>
                    </li>
                    <li><a class="page-scroll" href="#pricing">Courses</a></li>
                    <li><a class="page-scroll" href="#about">Prices</a></li>
                    <li><a class="page-scroll" href="#blog">Events</a></li>
                    <li><a class="page-scroll" href="#contact">Gallery</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Features <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="videobackground.html">Video Background</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="icons.html">Icons</a></li>
                            <li><a href="typography.html">Typography</a></li>
                            <li><a href="pricingtables.html">Pricing Tables</a></li>
                            <li><a href="buttons.html">Buttons</a></li>
                            <li><a href="progressbars.html">Progress Bars</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="blank.html">Blank Page</a></li>
                            <li><a href="404.html">404 Page</a></li>
                        </ul>
                    </li>
                    <li><a class="page-scroll" href="#contact">The Dropzone</a></li>
                    <li><a class="page-scroll" href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

并呈现如下

我想要的是导航项目包装到一个新的行，如下所示（我画了黑线）。

我想要实现的是导航品牌（徽标）占据行的10％，导航项目区域占用其余部分。现在它现在已经溢出了徽标。

编辑一个更好的图表，我的意思是两行

有什么建议吗？

Answer 1

使用此

<div class="container">
    <div class="row">
        <div class="col-md-3">
            logo
        </div>
        <div class="col-md-9">
            menu1 menu2 menu3 menu4 menu5
        </div>
    </div>
    <br/>
        <div class="col-md-9 col-md-offset-3">
            menu1 menu2 menu3 menu4 menu5
        </div>
</div>

并将徽标位置：absulate;

Bootstrap导航项目多行

1 个答案: