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; }

HTML

<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>

当窗口调整得更小时，为什么我的引导按钮会重叠

1 个答案: