Question

我正在制作一个带Bootstrap 3的导航栏。我现在不打算将其折叠或任何东西，只是一个标准的导航栏。它在桌面上看起来很棒，但在移动设备上，导航栏内的内容溢出到单独的“线”上，导航栏太高了。这是一张桌面上的图片：

以下是移动设备上的图片（这大约是视口高度的三分之一）：

目标是让它在移动设备上与在桌面上看起来一样，只是“Home”和最右边的按钮之间的空间更小。这是我的HTML：

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Home</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li><button class="btn btn-default navbar-btn">Log In</button></li>
            <li><button class="btn btn-default navbar-btn">Sign Up</button></li>
        </ul>
    </div>
</nav>

Answer 1

流体容器的性质，你是否愿意在小屏幕的情况下进行水平滚动，因此存在堆叠。如果你喜欢，请查看这个

http://jsfiddle.net/bbqodLdc/3/

<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Home</a>
        </div>
        <ul class="nav navbar-nav navbar-right" style="right:0;position:absolute;">
            <li><button class="btn btn-default navbar-btn">Log In</button></li>
            <li><button class="btn btn-default navbar-btn">Sign Up</button></li>
        </ul>
    </div>
</nav>

Answer 2

由于您的链接位于<ul class="nav navbar-nav navbar-right">内，因此您的导航将默认崩溃。您可以减少navbars元素，以便没有崩溃事件。

参见工作示例。

＆＃13;

body,
html {
  margin-top: 65px;
}
.navbar.navbar-default.lower-nav {
  border: none;
  border-radius: 0px;
  background: #222;
  border: none;
  margin-bottom: 0;
}
.navbar.navbar-default.lower-nav .nav-buttons {
  text-decoration: none;
  margin: 4px 5px;
  padding: 5px;
  top: 5px;
  border-radius: 0px;
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <nav class="navbar navbar-default lower-nav navbar-fixed-top" role="navigation">
    <div class="btn-group pull-left">
      <div class="btn btn-link nav-buttons">Home</span>
      </div>
    </div>
    <div class="btn-group pull-right">
      <div class="btn btn-link nav-buttons">Log In</div>
      <div class="btn btn-link nav-buttons">Sign Up</div>
    </div>
  </nav>
</div>
<div class="container">
  <div class="alert alert-info"> <a href="http://getbootstrap.com//">Bootstrap 3</a> 
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices enim id tortor tincidunt, eget mollis mauris gravida. Mauris sem leo, feugiat ut felis blandit, imperdiet egestas orci. Proin lacinia at massa fermentum facilisis. Donec laoreet
    facilisis nunc, sed posuere magna rhoncus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent augue ipsum, rhoncus vel tempus sed, vehicula non purus. Nunc sit amet consectetur risus. Integer eget justo ut sapien consectetur
    auctor id eu augue. Quisque ac elit congue, eleifend lectus a, tempor purus. In hac habitasse platea dictumst. Phasellus gravida massa arcu, sed sodales orci interdum vel. Curabitur ullamcorper leo mauris, ut interdum felis mollis id. Nunc porttitor
    egestas fringilla. Suspendisse volutpat sem quis sagittis fermentum. Fusce in laoreet elit. Etiam aliquam varius tincidunt.</p>
  <p>Nunc nisi justo, ultricies at lobortis et, fermentum at dolor. Nulla ultrices erat et erat egestas, in luctus justo pellentesque. In convallis purus ut pellentesque interdum. Curabitur in neque lectus. Nullam lobortis sodales elit, eu fringilla eros
    aliquet vel. Aliquam ac ipsum vel nunc vestibulum luctus nec sit amet mauris. Ut viverra ornare risus eu condimentum. Fusce sollicitudin volutpat nisl id dignissim. Sed malesuada dui at magna imperdiet, non accumsan odio imperdiet. Etiam tristique
    fermentum enim, vel dictum nulla fermentum ac. Etiam in bibendum nisi. Vestibulum neque lectus, vehicula eu sagittis ut, blandit sit amet mi.</p>
  <p>Maecenas lacinia vestibulum magna. Integer mollis varius ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sit amet tortor turpis. Cras pharetra tellus elit, nec iaculis erat pellentesque
    sit amet. Nullam varius felis vel velit fermentum, nec facilisis erat accumsan. Nullam facilisis orci quam, eget semper turpis dictum id. Aenean magna ante, lobortis id sollicitudin quis, dapibus nec nisi. Maecenas aliquet posuere lectus, a ultricies
    arcu sodales sodales. Proin dignissim facilisis consectetur. Pellentesque suscipit quis dui eget malesuada. Quisque cursus neque a faucibus egestas. Phasellus sed nulla scelerisque diam adipiscing suscipit. Etiam sit amet enim ultricies risus consequat
    vestibulum eu sit amet urna.</p>
  <p>Vivamus hendrerit eget augue viverra auctor. Praesent mi leo, facilisis vel nisi vitae, sodales rhoncus augue. Maecenas purus nunc, commodo at massa eu, blandit aliquet enim. Proin sem neque, imperdiet non arcu eu, sagittis malesuada est. Fusce enim
    neque, facilisis et mattis ut, vulputate sed justo. Vivamus elementum elit nunc, eget tempor erat adipiscing nec. Praesent vestibulum dapibus vehicula. Pellentesque viverra faucibus leo in ornare. Sed sodales faucibus tincidunt. Vivamus dignissim
    tristique libero sit amet aliquet. Donec ut nunc dolor. Duis molestie tortor mi, id auctor nisi ullamcorper et. Proin eu ante cursus, varius felis id, porta orci.</p>
  <p>Aliquam imperdiet scelerisque purus, nec sagittis mi auctor vitae. Maecenas sodales scelerisque massa, vitae iaculis neque tincidunt sed. Vivamus id imperdiet lectus. Fusce id tellus ut tellus volutpat hendrerit in at justo. Duis eu tempus nibh. Nunc
    consectetur euismod sapien, eget placerat metus tempor sit amet. Maecenas at sem ac purus dictum viverra. Praesent eu neque in metus congue dictum eu in dolor. Mauris a elit sem. Quisque non velit malesuada ligula aliquet lacinia. Donec congue, leo
    lacinia vulputate pulvinar, est justo venenatis nisi, sit amet condimentum massa sem sed urna. Duis eget pretium eros. Sed et rutrum leo, sit amet sollicitudin urna. Nullam dui augue, malesuada sed lectus sed, malesuada fringilla massa.</p>
</div>

＆＃13;

Answer 3

嗨，我在这里管理你想要的东西..！

＆＃13;

.sub-menu{
    right:0;
    float:right;
}
.sub-menu ul li{
    float:left;
}

＆＃13;

<nav class="navbar navbar-default">
    <div class="container">
        <div class="row-fluid">
             <div class="pull-left">
                    <a class="navbar-brand" href="#">Home</a>
             </div>
             <div class="sub-menu">
              <ul class="nav">
                 <li><button class="btn btn-default navbar-btn">Log In</button></li>
                 <li><button class="btn btn-default navbar-btn">Sign Up</button></li>
              </ul>
            </div>
        </div>    
    </div>     
</nav>

＆＃13;

这是它的工作演示

Working Demo

Bootstrap 3导航栏默认固定高度

3 个答案: