如何在Bootstrap 4 Navbar元素之间添加均匀空间

发布于 2025-01-29 17:12:00 字数 983 浏览 0 评论 0原文

我希望我的元素在Navbar中均匀地间隔，我尝试了其他已经有这个的帖子，但它行不通。

<nav class= "navbar navbar-expand-lg navbar-dark bg-dark" >
        
            <div class= "container-fluid" >
                <button class= "navbar-toggler" type= "button" data-bs-toggle= "collapse" data-bs-target= "#navbar">
                    <span class= "navbar-toggler-icon"/>
                </button>
                <div  class= "collapse navbar-collapse" id= "navbar">
                    <div class= "navbar-nav">
                        <a class= "nav-item nav-link" href= "/home">Home</a>
                        
                        <a class= "nav-item nav-link" href= "/about">About</a>
                        
                        <a class= "nav-item nav-link" href= "/contact">Contact</a>
                        
                    </div>
                </div>
            </div>

原文

I want my elements to be evenly spaced in the navbar, I tried other post that already had this but it won't work.

<nav class= "navbar navbar-expand-lg navbar-dark bg-dark" >
        
            <div class= "container-fluid" >
                <button class= "navbar-toggler" type= "button" data-bs-toggle= "collapse" data-bs-target= "#navbar">
                    <span class= "navbar-toggler-icon"/>
                </button>
                <div  class= "collapse navbar-collapse" id= "navbar">
                    <div class= "navbar-nav">
                        <a class= "nav-item nav-link" href= "/home">Home</a>
                        
                        <a class= "nav-item nav-link" href= "/about">About</a>
                        
                        <a class= "nav-item nav-link" href= "/contact">Contact</a>
                        
                    </div>
                </div>
            </div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

殊姿 2025-02-05 17:12:00

的间距和弹性选项

Bootstrap 4具有Navbars Navbar-Nav仅使用足够width适合其项目。需要更宽以适应弹性间距选项。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">

    <!-- Modify this -->
    <div class="navbar-nav justify-content-between w-100">

      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

Bootstrap 4 has spacing and flex options for NavBars

navbar-nav only uses enough width to fit its items. It needs to be wider to accommodate flex spacing options.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">

    <!-- Modify this -->
    <div class="navbar-nav justify-content-between w-100">

      <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-link" href="#">Features</a>
      <a class="nav-link" href="#">Pricing</a>
      <a class="nav-link disabled">Disabled</a>
    </div>
  </div>
</nav>

回复收藏 0 原文

~没有更多了~