如何将导航栏的宽度增加到全宽？

Question

。我想增加它的宽度。这是一个导航栏html和CSS代码，在增加导航栏宽度时出错。在此导航栏代码中，它无法正常工作，我只想增加其宽度，以使其满载。图片如下。请帮忙，谢谢。

     Private Sub ExitToolStripMenuItem_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ExitToolStripMenuItem.Click

    cashsalesForm_FormClosing(ExitToolStripMenuItem, e) '<-ERROR shows here

End Sub

    Private Sub cashsalesForm_FormClosing(ByVal sender As Object, ByVal e As System.Windows.Forms.FormClosingEventArgs) Handles Me.FormClosing
    //some codes here
End Sub

CSS部分

<nav class="navbar navbar-expand-lg navbar-dark bg-dark ftco-navbar-light" id="ftco-navbar">
    <div class="container d-flex align-items-center px-4">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="oi oi-menu"></span> Menu
      </button>
      <form action="#" class="searchform order-lg-last">
      <div class="form-group d-flex">
        <input type="text" class="form-control pl-3" placeholder="Search">
        <button type="submit" placeholder="" class="form-control search"><span class="ion-ios-search"></span></button>
      </div>
    </form>
      <div class="collapse navbar-collapse" id="ftco-nav">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active"><a href="index.html" class="nav-link pl-0"  style="text-align: center;">Home</a></li>
            <li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
            <li class="nav-item"><a href="courses.html" class="nav-link">Courses</a></li>
            <li class="nav-item"><a href="teacher.html" class="nav-link">Staff</a></li>
          <li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>
<!-- END nav -->   

Answer 1

您可以在CSS文件中将宽度值设置为100％。

您也可以使用引导程序来实现此目的 我们在引导程序中有container和container-fluid，第一个在所选div（或其他任何位置）的左侧和右侧保留边距，而第二个则为该宽度保留整个宽度。 我们还在引导程序中提供了row类，您可以将其与container

一起使用

您可以在此处了解有关引导程序及其网格的更多信息：

https://getbootstrap.com/docs/4.0/layout/grid/