Question

我正在按照教程学习使用angular和bootstrap的项目。我是Web开发的新手。我在项目中使用了导航栏。我从Bootstrap网站获得了代码。但是，导航栏看起来不太好。

有两个问题。

导航栏上的元素被挤压在一起。它们不会占据页面的整个宽度。如何使它占据整个宽度？
在标题旁边，左侧有一个矩形按钮。导航栏不折叠时如何隐藏？

谢谢。

这是html代码。

  <div class="container" >
  <nav class="navbar navbar-expand-md navbar-default" role="navigation">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">{{title}}</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
        <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search Problem">
          </div>
        </form>
        <ul class="nav navbar-nav navbar-right">

          <li>
            <form class="navbar-form">
              <button type="button" class="btn btn-primary">Sign In</button>
            </form>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{username}} <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">My Profile</a></li>
              <li><a href="#">My Favorites</a></li>
              <li><a href="#">My Submissions</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Log Out</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
</div>

Answer 1

我刚刚将引导程序版本更改为3.3.7。现在一切看起来都很好。我已经尝试过4.1.0，但是它也没有很好地工作。我不知道到底是怎么回事。至少导航栏现在可以正常工作。

如何更改引导导航栏以占据整个宽度并摆脱左侧的矩形？

1 个答案: