【问题标题】:How to add space inbetween nav items in bootstrap如何在引导程序中的导航项之间添加空格
【发布时间】:2018-01-02 22:11:16
【问题描述】:

我想知道是否可以在 Bootstraps 导航栏中的项目之间添加间距以将它们分散一点?具体来说,如果我可以将所有导航项左右间隔至少 25 像素。

我尝试在 .navbar-nav.navbar-nav > a 类中添加左右边距,但它似乎没有改变任何东西。

提前感谢您!

<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top p">
    <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">
        <div class="navbar-nav ml-auto">
            <a class="nav-item nav-link" href="#">Home <span class="sr-only">(current)
            </span></a>
            <a class="nav-item nav-link" href="#">Features</a>
            <a class="nav-item nav-link" href="#">Pricing</a>
            <a class="nav-item nav-link" href="#">Disabled</a>
        </div>
    </div>
</nav>

【问题讨论】:

    标签: html css bootstrap-4


    【解决方案1】:

    .navbar-nav &gt; a 应该可以很好地定位.nav-items。如果它不起作用,请确保在引用 bootstrap.css 后应用自定义样式。顺便说一句,Bootstrap 使用应用于.navbar-expand-{breakpoint} .navbar-nav .nav-link 的填充来分隔项目。以下也应该可以正常工作:

    .navbar-nav .nav-link {
        margin-right: 25px;
        margin-left: 25px;
    }
    

    此外,如果您不介意扩展标记,Bootstrap 中提供了方便的Spacing utility 类。有了这些,您可以轻松地微调您的布局。
    在下面的示例中,我在.nav-items 上使用.mx-3 将它们在水平方向上的边距增加到每侧的1rem。然后在最后一项上应用.ml-3 –margin-left– 以使其右边缘与布局的其余部分对齐。

    <nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top p">
        <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">
            <div class="navbar-nav ml-auto">
                <a class="nav-item nav-link mx-3" href="#">Home <span class="sr-only">(current)
                </span></a>
                <a class="nav-item nav-link mx-3" href="#">Features</a>
                <a class="nav-item nav-link mx-3" href="#">Pricing</a>
                <a class="nav-item nav-link ml-3" href="#">Disabled</a>
            </div>
        </div>
    </nav>
    
    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>

    【讨论】:

      【解决方案2】:

      为了在 bootstrap4 中分隔两个导航栏区域,我使用了这个:

          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="/">
              <img src="logo.png" width="192" height="44" alt="">
              Bootstrap Navbar Demo
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
      
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <div class="navbar-nav mr-auto">
                <a class="nav-item nav-link mx-3 active" href="/page1">Page 1</a>
                <a class="nav-item nav-link mx-3" href="/page2">Page 2</a>
                <a class="nav-item nav-link mx-3" href="/page2">Page 3</a>
              </div>
              <div class="navbar-nav">
                <a class="nav-item nav-link mx-3" href="/logout">Logout</a>
              </div>
            </div>
          </nav>
      

      基本上,按钮的边距为mx-3 以将它们分开一点。 mr-autologout 按钮推到最右边。

      https://stackoverflow.com/a/18600623/999943 非常好。

      希望对您有所帮助。

      【讨论】:

        【解决方案3】:

        您需要将边距应用到类 .navbar-nav > .nav-item 而不是 .navbar-nav > a

        所以你应该这样做。

        .navbar-nav > .nav-item{
            margin-left: 25px;
            margin-right: 25px;
        }
        

        【讨论】:

          猜你喜欢
          • 2018-07-18
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2015-07-02
          • 2016-08-05
          相关资源
          最近更新 更多