Boostrap输入和导航栏

Question

我将导航栏更改为全宽导航栏，此后，带有图标的输入div和ul更改了宽度。无法解决尝试了很多，但我不知道该问题的解决方案是什么。我正在使用一个容器将内容放在导航栏中，也许是原因。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<nav class="navbar-nav navbar-expand-sm fixed-top">
  <div class="container">
    <a class="navbar-brand"><img src="path1610.png"></a>
    <div class="col-8 col-sm-6 col-md-7 col-lg-5 col-xl-5">
      <form class="navbar-form">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Let's rock!">
          <div class="input-group-append">
            <button class="btn btn-outline-primary"><i class="fas fa-search"></i></button>
          </div>
        </div>
      </form>
    </div>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHidden" aria-controls="navbarHidden" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarHidden">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-user fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link">
            <span class="fas fa-bell fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-fire fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-cog fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-comments fa-2x">
                            </span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

只需将外部导航类从navbar-nav更改为navbar，然后将container更改为container-fluid即可。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<nav class="navbar navbar-expand-sm fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand"><img src="path1610.png"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHidden" aria-controls="navbarHidden" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span>
    </button>
    <div class="col-8 col-sm-6 col-md-7 col-lg-5 col-xl-5">
      <form class="navbar-form">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="Let's rock!">
          <div class="input-group-append">
            <button class="btn btn-outline-primary"><i class="fas fa-search"></i></button>
          </div>
        </div>
      </form>
    </div>
    <div class="collapse navbar-collapse" id="navbarHidden">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-user fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link">
            <span class="fas fa-bell fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-fire fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-cog fa-2x"></span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <span class="fas fa-comments fa-2x">
                            </span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>