菜单上方的引导导航栏品牌，直到调整大小并折叠

Posted 2023-03-21

【中文标题】菜单上方的引导导航栏品牌，直到调整大小并折叠

【英文标题】：Bootstrap navbar-brand above menu until resize and collapse in

【发布时间】：2017-03-10 20:59:57

【问题描述】：

我一直在寻找这方面的一个例子，但找不到任何东西。我使用常规文本作为我的导航栏品牌（无图像），但字体为 200-300% 并且占用了大量空间。我想将名称放在菜单上方。但是，当窗口调整大小时，我需要它折叠到导航栏的中心（当链接折叠时）。

应该是这样的：

                             WEBSITE NAME
         link     link1    link2      link3   link4     link5

然后折叠成

                             WEBSITE NAME                ==

所以，现在这就是我正在使用的。居中的文本，两侧有链接，但由于尺寸不切实际，链接会溢出导航栏品牌。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
    <a class="navbar-brand" href="#">BIG WEBSITE TITLE</a>
  </div>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-left">
        <li id="nav">LINK for: </li>
        <li id="nav"><a href="#"><i class="fa fa-mars" aria-hidden="true"></i> LINK</a></li>
        <li id="nav"><a href="#"><i class="fa fa-venus" aria-hidden="true"></i> LINK</a></li>
        <li id="nav"><a href="#">LINK</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">LINK</a></li>
      <li><a href="#">LINK</a></li>
    </ul>
  </div>
</nav>

一些CSS

.navbar-brand

    font-size: 200%;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;

.navbar-toggle 
    z-index:3;


@media (min-width: 768px) 
.navbar-brand,
.navbar-nav li a 
    line-height: 70px;
    height: 70px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;

    .navbar-nav li 
    line-height: 70px;
    height: 70px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-left: 10px;

    .navbar-brand
    
    font-size: 300%;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    vertical-align: middle;
    margin: auto;


.navbar
    background-color: #ZZZZZ;

这对我来说根本不起作用。

【问题讨论】：

关于链接的名称和它们所代表的结构，这将有助于澄清你的问题的意图，特别是对于那些后来将其用作资源的人，如果它们匹配在名称中（代码中没有“link5”。）

@BrandonBradley 我可以稍后再澄清一下，但是每个链接都是非常随意的，我只是调用了一些 LINK 并且视觉中的链接增加了。

【参考方案1】：

应该这样做

@media (min-width: 768px) 
  .navbar-nav.navbar-center, .navbar-header-center 
    margin-left: 50%;
    transform: translateX(-50%);
  

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header navbar-header-center">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>    
        <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="clearfix"></div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-center">
           <li><a href="#">Link1</a></li>
           <li><a href="#about">Link2</a></li>
          <li><a href="#about">Link3</a></li>
          <li><a href="#contact">Link4</a></li>
        </ul>
      </div>
    </nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

【讨论】：

这适用于链接非常小的情况，但会有很多溢出，更多链接进入第二列。

【参考方案2】：

所以我将这段代码添加到 css 中。

.navbar 
  height:100px;


.nav.navbar-left
  bottom: 0;
  left: 0;
  position:absolute;


.nav.navbar-right
  bottom: 0;
  right: 0;
  position:absolute;

对于这个效果：https://gyazo.com/c5ae543c41b4383189e0d65b1869699f

这是你想要的吗？如果没有，我道歉。

【讨论】：

在我上面的代码中，导航栏品牌仍在导航栏中。所以，这真的没有任何作用。