我如何在引导程序中制作这样的导航栏



我尝试了这段代码:

<!-- Navigation bar -->
    <div class="navbar navbar-inverse navbar-fixed-top">

        <!-- Navigation bar content -->
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>

                <!-- Organization name -->
                <a class="brand" href="/">Test</a>

                <!-- Tabs -->
                <div class="nav-collapse collapse">
                  <ul class="nav">
                      <li class="divider-vertical"></li>
                      <li><a href="index/FLT.do"><i class="icon-pencil icon-white"></i> Test</a></li>
                  </ul>

                  <!-- Sign in -->
                  <ul class="nav pull-right">
                        <li class="divider-vertical"></li>
                        <li>
                            <a href="#login_modal" data-toggle="modal" >Sign In</a>
                        </li>
                    </ul>

                </div>
                <!-- /.Tabs -->

            </div>
        </div>
        <!-- /.Content -->

    </div> <!-- /.Navigation bar content -->

     <div class="container-fluid">
        <div class="row-fluid">

            <div class="span2">
                <!-- Left Navbar -->
                <div class="navbar navbar-static-top">
                  <div class="navbar-inner">
                    <a class="brand" href="#">Title</a>
                  </div>
                </div>

            </div>

            <div class="span10">
                <!-- Right Navbar -->
                <div class="navbar navbar-static-top">
                  <div class="navbar-inner">
                    <a class="brand" href="#">Title</a>
                  </div>
                </div>

            </div>

        </div>
    </div>


这将导致以下结果:



我也尝试了内联样式,但是我在网上大声疾呼这不是一个好习惯,我还尝试过重覆写那些破坏引导程序的类。之间有空格。仅通过引导或没有内联样式就不可能做到这一点吗?

最佳答案

您在各列之间看到的空间称为装订线宽度。我在一个项目中遇到了同样的问题。如果您不想修改任何CSS,那么建议您获得自定义的引导程序。您可以修改网格系统。

http://getbootstrap.com/2.3.2/customize.html上自定义Bootstrap

关于html - 引导导航栏并排,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19509461/

10-12 12:56
查看更多