如何在引导程序 4 中居中固定顶部导航栏 [英] How to center a fixed top Navbar in bootstrap 4

问题描述

我试图在 Bootstrap 4 apla 6 中将 固定顶部导航栏居中，但它没有居中，而是完全填充顶部.固定在顶部时如何使其居中.我已将导航栏放在网站上提到的容器中，但它没有居中.

请看下面的图片

居中但不固定在顶部

固定在顶部，但即使它在容器中也会填充宽度

<nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse"><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span><a class="navbar-brand" href="#">Navbar</a><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a><li class="nav-item"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="text" placeholder="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button></表单>
</nav>

似乎如果你用容器类将它包装在一个 div 中它不起作用，但如果你在导航栏中使用容器类它工作

解决方案

使导航栏也成为容器...

http://www.codeply.com/go/sJbrJciQia

<nav class="navbar container navbar-toggleable-sm fixed-top navbar-inverse bg-inverse"><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1"><span class="navbar-toggler-icon"></span><a class="navbar-brand" href="#">Brand</a><div class="collapse navbar-collapse" id="navbar1"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link" href="#">Link</a><ul class="navbar-nav ml-auto"><li class="nav-item active"><a class="nav-link" href="#">Link</a>

</nav>

I am trying to center a fixed top navbar in Bootstrap 4 apla 6 but it is not centering it, but instead fills the top in full. How can I make it centered while fixed at the top. I have placed the nav bar in a container as mentioned on the website but it is not centering.

Please see images below

Centered but not fixed at top

fixed at top, but filling the width even though it is in a container

<div class="container">
  <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-inverse ">
      <button class="navbar-toggler navbar-toggler-right" 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>
      <a class="navbar-brand" href="#">Navbar</a>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
   </div>

It seems if you wrap it in a div with container class it does not work but if you use the container class in the nav bar it works

解决方案

Make the navbar a container too...

http://www.codeply.com/go/sJbrJciQia

<nav class="navbar container navbar-toggleable-sm fixed-top navbar-inverse bg-inverse">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    <div class="collapse navbar-collapse" id="navbar1">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

这篇关于如何在引导程序 4 中居中固定顶部导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！