如何使我的Bootstrap 4导航栏下拉菜单全宽？

huangapple
go评论92阅读模式
英文:

How can I make my Bootstrap 4 navbar dropdown full width?

问题

我正在尝试在Bootstrap 4导航栏上实现全宽度的下拉菜单。我正在使用标准的Bootstrap 4导航栏。以下是您提供的代码示例：

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="index.html">Start Bootstrap</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="about.html">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="services.html">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact.html">Contact</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPortfolio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Portfolio
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPortfolio">
            <a class="dropdown-item" href="portfolio-1-col.html">1 Column Portfolio</a>
            <a class="dropdown-item" href="portfolio-2-col.html">2 Column Portfolio</a>
            <a class="dropdown-item" href="portfolio-3-col.html">3 Column Portfolio</a>
            <a class="dropdown-item" href="portfolio-4-col.html">4 Column Portfolio</a>
            <a class="dropdown-item" href="portfolio-item.html">Single Portfolio Item</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Blog
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
            <a class="dropdown-item" href="blog-home-1.html">Blog Home 1</a>
            <a class="dropdown-item" href="blog-home-2.html">Blog Home 2</a>
            <a class="dropdown-item" href="blog-post.html">Blog Post</a>
          </div>
        </li>
        <li class="nav-item dropdown show">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Other Pages
          </a>
          <div class="dropdown-menu dropdown-menu-right show" aria-labelledby="navbarDropdownBlog">
            <a class="dropdown-item" href="full-width.html">Full Width Page</a>
            <a class="dropdown-item" href="sidebar.html">Sidebar Page</a>
            <a class="dropdown-item" href="faq.html">FAQ</a>
            <a class="dropdown-item" href="404.html">404</a>
            <a class="dropdown-item" href="pricing.html">Pricing Table</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

这是您提供的导航栏代码的中文翻译。

英文:

I am trying to get a full-width dropdown on a bootstrap 4 navbar. I am using a standard boot4 Navbar.

This is the navbar I am using

Here is how I need it to look :

如何使我的Bootstrap 4导航栏下拉菜单全宽？

&lt;nav class=&quot;navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top&quot;&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;a class=&quot;navbar-brand&quot; href=&quot;index.html&quot;&gt;Start Bootstrap&lt;/a&gt;
&lt;button class=&quot;navbar-toggler navbar-toggler-right&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarResponsive&quot; aria-controls=&quot;navbarResponsive&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
&lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarResponsive&quot;&gt;
&lt;ul class=&quot;navbar-nav ml-auto&quot;&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;about.html&quot;&gt;About&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;services.html&quot;&gt;Services&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item&quot;&gt;
&lt;a class=&quot;nav-link&quot; href=&quot;contact.html&quot;&gt;Contact&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item dropdown&quot;&gt;
&lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; id=&quot;navbarDropdownPortfolio&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
Portfolio
&lt;/a&gt;
&lt;div class=&quot;dropdown-menu dropdown-menu-right&quot; aria-labelledby=&quot;navbarDropdownPortfolio&quot;&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;portfolio-1-col.html&quot;&gt;1 Column Portfolio&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;portfolio-2-col.html&quot;&gt;2 Column Portfolio&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;portfolio-3-col.html&quot;&gt;3 Column Portfolio&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;portfolio-4-col.html&quot;&gt;4 Column Portfolio&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;portfolio-item.html&quot;&gt;Single Portfolio Item&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item dropdown&quot;&gt;
&lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; id=&quot;navbarDropdownBlog&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
Blog
&lt;/a&gt;
&lt;div class=&quot;dropdown-menu dropdown-menu-right&quot; aria-labelledby=&quot;navbarDropdownBlog&quot;&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;blog-home-1.html&quot;&gt;Blog Home 1&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;blog-home-2.html&quot;&gt;Blog Home 2&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;blog-post.html&quot;&gt;Blog Post&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li class=&quot;nav-item dropdown show&quot;&gt;
&lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; id=&quot;navbarDropdownBlog&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;true&quot;&gt;
Other Pages
&lt;/a&gt;
&lt;div class=&quot;dropdown-menu dropdown-menu-right show&quot; aria-labelledby=&quot;navbarDropdownBlog&quot;&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;full-width.html&quot;&gt;Full Width Page&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;sidebar.html&quot;&gt;Sidebar Page&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;faq.html&quot;&gt;FAQ&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;404.html&quot;&gt;404&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;pricing.html&quot;&gt;Pricing Table&lt;/a&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;

</nav>

答案1

得分: 1

  1. 将你的类 container 替换为 container-fluid
  2. 从 navbar-nav 中删除 ml-auto
英文:
  1. Replace your class container with container-fluid
  2. Delete ml-auto from navbar-nav

huangapple
  • 本文由 发表于 2020年1月7日 00:03:20
  • 转载请务必保留本文链接：https://go.coder-hub.com/59615252.html
  • bootstrap-4
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定