小编use*_*747的帖子

我们如何使导航栏中的垂直分隔线均匀分布？

这是我目前正在使用的HTML和CSS.

HTML:

<li class="divider-vertical"><a href = "#">Contact Us</a></li>

CSS:

.divider-vertical {
height: 50px;
margin: 0 9px;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #FFF;
}

导航条代码:

<nav class="navbar navbar-default navbar-static-top" role="navigation">
       <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
          </button>
       </div>

      <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav">
            <li><a href = "#">Home</a></li>
            <li class="divider-vertical"><a href = "#">About</a></li>
            <li class="divider-vertical"><a href = "#">Jobs</a></li>
            <li class="divider-vertical"><a href = "#">Contact Us</a></li>
            <li class="divider-vertical"><a href = "#">Resources</a></li>
          </ul> …

我试图让我的按钮在所有显示尺寸下都彼此相邻。但是，当我缩小窗口时，它们会彼此重叠，如 jsfiddle 中所示。

我尝试过使用 col-xs-offset 和 col-xs-push 但由于某种原因它会影响我的 col-md 和 col-lg 设置，我检查了我的 bootstrap 和 html 但似乎没有任何问题。

我怎样才能解决这个问题？

JSFiddle： https://jsfiddle.net/whywymam/2u79tpp2/1/

HTML：

  <div class="container">

              <div class="row upperRow">

                   <nav class="nav logoFw">
                       <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
                           <a href="../mainpage/home.php" class="brand navbar-brand "> <img src="../image/logo.jpg" class="img-responsive" alt="logo"></a>
                       </div>
                   </nav>

                    <ul class="nav navbar-nav navbar-right">

                           <li>
                               <div class="col-xs-3 col-sm-4 col-md-4 col-lg-4">    
                                     <a href="../jobseeker/signupLogin.php" class="btn btn-danger" role="button">
                                         <i class="glyphicon glyphicon-user"></i>Job Seeker
                                     </a>
                               </div>
                           </li>      

                           <li>
                               <div class="col-xs-3 col-md-4 col-lg-4">
                                     <a href="../employer/signupLoginEmp.php"  class="btn btn-danger" role="button">
                                         <i class="glyphicon glyphicon-user"></i><i class="glyphicon …