Question

大家好我试图让我的导航栏响应它但是当我降低分辨率我的导航栏在'公司'我看到一些帖子但他们都没有工作所以我想问如果有人知道如何解决这个问题？

我的代码：

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

Answer 1

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

＆＃13;

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

＆＃13;

要控制导航栏折叠点，请使用@grid-float-breakpoint和@grid-float-breakpoint-max LESS变量（请参阅Grid system部分）。您还可以为Media queries breakpoints设置自定义值。可以使用customization工具获取您自己的Bootstrap版本。

Bootstrap 4导航条断点

1 个答案: