Question

我有一个导航栏，左侧带有菜单按钮。删除以下标签后，此菜单按钮将起作用：

<div class="navbar-center navbar-brand" href="#">
  <a class="navbar-brand">Brand</a>
</div>`

我需要保留这个BRAND标题，但它会弄乱菜单按钮的功能

.navbar-brand {
  float: none;
}

.navbar-center {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  margin: auto;
  height: 100%;
}

<!-- HTML  -->
<div id="content">

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <button type="button" id="sidebarCollapse" class="btn btn-default">
                            <i class="fa fa-bars fa-lg" aria-hidden="true"></i>
                            <span>Menu</span>
                        </button>


    </div>
    <div class="navbar-center navbar-brand" href="#"><a class="navbar-brand">Brand</a></div>
  </nav>

Answer 1

该按钮未被禁用，您将其放置在绝对位置并为其设置100％的宽度和高度。您的导航栏中心占据了所有空间。

如果您不确切地知道自己在做什么，我会重新考虑重写您的逻辑，并避免使用绝对位置。

无论如何，一种快速的（丑陋的）解决方法是将z-index设为负数。这样，它仍然占据了整个屏幕，但位于所有内容的后面。

.navbar-brand {
  float: none;
}

.navbar-center {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  margin: auto;
  height: 100%;
  z-index:-99999
}

<!-- HTML  -->
<div id="content">

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <button type="button" id="sidebarCollapse" class="btn btn-default">
                            <i class="fa fa-bars fa-lg" aria-hidden="true"></i>
                            <span>Menu</span>
                        </button>


    </div>
    <div class="navbar-center navbar-brand" href="#"><a class="navbar-brand">Brand</a></div>
  </nav>

Answer 2

此代码修复程序，只需要在类别“ navbar-brand ”中的“ ”行即可。
要在不破坏菜单的情况下使品牌居中，可以使用BS类“ mx-auto ”，则不需要其他CSS。

Bootstrap对导航或菜单之类的“定义的结构”有些敏感，您必须使用自己的 bootstrap页面（https://getbootstrap.com/docs/4.1/getting-started/introduction/）中的文档，以免发疯；）

PD：使用代码段时，可以使用左侧面板中的“添加其他脚本”按钮，以添加更多框架，例如本例中的“ bootstrap”和“ fontAwesome”;）

.navbar-brand {
  float: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div id="content">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <button id="sidebarCollapse" class="btn btn-default">
          <i class="fa fa-bars fa-lg" aria-hidden="true"></i>                 <span>Menu</span>
      </button>
    <a class="navbar-brand mx-auto" href="#">Brand</a>
    </div>
  </nav>

带有品牌徽标的HTML引导导航栏

2 个答案: