问Bootstrap 4导航栏断点
EN

Stack Overflow用户

提问于 2017-07-01 22:59:08

回答 1查看 46关注 0票数 0

大家好，我试图让我的导航栏响应它，但当我降低分辨率，我的导航栏是‘公司’，我已经看到了一些帖子，但没有一个工作，所以我想问是否有人知道如何解决这个问题？

我的代码：

 <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-header">
            <div class="row">
                <div class="col-xs-12">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
            </div>
            <a href="#" class="comp navbar-brand">COMPANY</a>
        </div>
    <div class="collapse navbar-collapse" id="mainNavBar">
        <ul class="navi nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        <ul>
    </div>
    </nav>
        <center><button type="button" class="learn">Learn more</button></center>
        <center><p class="how">How did i get started?</p></center>
        <center><p class="date">2016-2017</p></center>
</body>

twitter-bootstrap

html

回答 1

Stack Overflow用户

发布于 2017-07-02 00:47:45

你需要为你的导航栏使用.container或.container-fluid来包装内容和内置Bootstrap网格系统。有关详细信息，请参阅Containers和Navbar部分。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse" id="mainNavBar">
      <ul class="navi nav navbar-nav navbar-right">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

要控制导航栏的缩放点，请使用@grid-float-breakpoint和@grid-float-breakpoint-max LESS变量(请参阅Grid system部分)。您还可以为Media queries breakpoints设置自定义值。可以使用customization工具获得您自己的引导程序版本。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44862334

复制

相似问题

问Bootstrap 4导航栏断点
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 4导航栏断点EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 4导航栏断点
EN