当窗口缩小时，为什么我的引导按钮会重叠

Question

我试图让我的按钮在所有显示尺寸下都彼此相邻。但是，当我缩小窗口时，它们会彼此重叠，如 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 glyphicon-user"></i>Employer
                                     </a>
                               </div>
                           </li>

                    </ul>
        </div>
        <div class="clearfix visible-xs-block visible-md-block visible-sm-block visible-lg-block"></div>



        <div class="row bottomRow">

                <div class="col-sm-12 col-md-12 col-lg-12">

                <nav role="navigation" class="navbar-inner navbar-default navbar-static-top navcolor">

                          <div class="navbar-header ">

                              <!--button to appear when display is on mobile device-->
                              <button type="button" data-target="#nav-collapse" data-toggle="collapse" class="navbar-toggle">
                                  <span class="sr-only">Toggle navigation</span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                                  <span class="icon-bar"></span>
                              </button>

                          </div>

                          <div id="nav-collapse" class="collapse navbar-collapse topmenu">

                              <ul class="nav navbar-nav center-block">
                                <li><a href="../mainpage/home.php">Home</a></li>
                                <li><a href="../mainpage/about.php">About</a></li>
                                <li><a href="#">Job</a></li>
                                <li><a href="../mainpage/resources.php">Resources</a></li>
                              </ul>

                          </div>          

                    </nav> <!-- end navbar-inner navbar-default navbar-static-top navcolor -->

                </div>

            </div> <!-- end middle row -->

            <!--to indicate which page user is on -->        


  </div><!-- end container -->

Answer 1

您可能想要删除包含按钮的无序列表，而使用按钮组：

http://getbootstrap.com/components/#btn-groups

另外，由于按钮组使按钮彼此齐平，因此请使用一些 CSS 来覆盖它们的边距。

JS 小提琴：

https://jsfiddle.net/1dwq7bqx/

CSS

.btn-group button { margin: 0 7px; }

超文本标记语言

<div class="container">
    <div class="row">
        <div class="col-md-4 text-left">
            <img src="logo.jpg" class="img-responsive" alt="logo" />
        </div>
        <div class="col-md-8 text-right">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i> Job Seekers</button>
                <button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i><i class="glyphicon glyphicon-user"></i> Employers</button>
            </div>
        </div>
    </div>
</div>