Html 并排引导导航栏

如何在bootstrap中制作这样的导航条

我尝试了以下代码：

<!-- 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，那么我建议您使用自定义引导。您可以修改网格系统

---

在

处自定义引导无法创建外部CSS文件来执行此操作？是的。但是，这需要通过覆盖样式的方式进行大量的工作。由于引导css和外部css样式冲突，如果我们正在重写，则可能必须处理css特定性问题。