Question

https://jsfiddle.net/rpq1tf9x/

  <body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">Italian Joe</a>
    </div>

      <p class="navbar-text text-center" id="NavHours" style="color:white; margin:1%; width: 220px;"> Open 6am to 5pm </p>

    <div class="collapse navbar-collapse" id="myNavbar">

      <ul class="nav navbar-nav navbar-right">
         <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
    </div>
  </div>
</nav>

</body>

正如在这个jsfiddle链接中可以看到的，我有一个基本的bootstrap折叠导航栏，中间添加了一个文本，显示为“Open amam am ampm”，它在大屏幕上都很好用但是当你把它调整到较小的屏幕时屏幕打破了导航栏。有谁知道这是为什么？谢谢

Answer 1

问题是您的段落需要在<{1}} 之内，而不是之后。只需将段落移至右侧DIV即可纠正此问题：

navbar-header

但是，为了显示“正确”，您需要通过删除<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Italian Joe</a> <p class="navbar-text text-center" id="NavHours" style="color:white; margin:1%; width:220px;"> Open 6am to 5pm </p> </div>将其从顶部偏移，并为其增加宽度（230px而不是220px）：

margin: 1%

我创造了一个展示这个here的新小提琴。

希望这有帮助！：）

调整大小为移动大小时，Navbar文本会突破Bootstrap导航栏

1 个答案: