Bootstrap导航栏品牌移动其他元素[重复]答案

【问题标题】：Bootstrap navbar brand moves other elements [duplicate]Bootstrap导航栏品牌移动其他元素[重复]
【发布时间】：2022-02-08 05:49:23
【问题描述】：

我想使用 bootstrap navbar 品牌，而不让它推动其他元素

这样，图标在左侧，导航栏元素完美居中

或者，也可以不使用 navabr 品牌中的元素，而是将元素本身作为普通链接放置但强制放在一边？

代码笔：

https://codepen.io/bladeranner5005/pen/wvPoBPx

/*--Background--*/

body {
  background-color: black;
  font-family: 'Righteous', cursive;
}

p {
  font-size: 1.5vw;
}

@media (max-width:768px) {
  p {
    font-size: 2.5vw;
  }
}

h4 {
  font-size: 1.8vw;
}

@media (max-width:768px) {
  h4 {
    font-size: 2.8vw;
  }
}


/*
@media  {

    background-image: url("../img/background/sfondo-index-bn.png");
    background-size: cover;
    background-repeat: no-repeat;

    height: 100vh;

}

.background-image-index {
    background-color: black;
}

 */


/*--Font righteous--*/

.font-righteus {
  font-family: 'Righteous', cursive;
}


/*--Navbar--*/

.background-black {
  background-color: black;
}


/*--Colors nav--*/

.border-pill {
  border-radius: 500px;
  border-style: solid;
  border-width: thick;
}

@media (max-width:768px) {
  .border-pill {
    border-style: none;
  }
}

.storia-bd-colors {
  border-color: #fd0ade;
}

.storia-colors {
  color: #fd0ade;
}

.storia-bd-colors:hover {
  border-color: #fd0ade;
  background-color: #fd0ade;
}

.storia-bd-colors:hover>.storia-colors {
  color: black;
}

.storia-bd-colors-active {
  border-color: #fd0ade;
  background-color: #fd0ade;
}

.storia-colors-active {
  color: black;
}

@media (max-width:768px) {
  .storia-bd-colors-active {
    background-color: black;
  }
  .storia-colors {
    color: white;
  }
  .storia-colors-active {
    color: white;
  }
  .storia-bd-colors:hover {
    background: none;
  }
  .storia-bd-colors:hover>.storia-colors {
    color: white;
  }
}

.access-bd-colors {
  border-color: #0004FF;
}

.access-colors {
  color: white;
}

.access-bd-colors:hover {
  border-color: #0004FF;
  background-color: #0004FF;
}

.access-bd-colors:hover>.access-colors {
  color: black;
}

.access-bd-colors-active {
  border-color: #0004FF;
  background-color: #0004FF;
}

.access-colors-active {
  color: black;
}

@media (max-width:768px) {
  .access-bd-colors-active {
    background-color: black;
  }
  .access-colors {
    color: white;
  }
  .access-colors-active {
    color: #0004FF;
  }
  .access-bd-colors:hover {
    background: none;
  }
  .access-bd-colors:hover>.access-colors {
    color: #0004FF;
  }
}


/*

.info-bd-colors {
    border-color: #fd0ade;
}

.info-colors {
    color: #fd0ade;
}

.info-bd-colors:hover {
    border-color: #fd0ade;

    background-color: #fd0ade;
}

.info-bd-colors:hover > .info-colors {
    color: black;
}

.info-bd-colors-active {
    border-color: #fd0ade;

    background-color: #fd0ade;
}

.info-colors-active {
    color: black;
}

@media (max-width:768px) {
    .info-bd-colors-active {
        background-color: black;
    }

    .info-colors {
        color: white;
    }

    .info-colors-active {
        color: white;
    }

    .info-bd-colors:hover {
        background: none;
    }

    .info-bd-colors:hover > .info-colors {
        color: white;
    }
}

 */

.home-bd-colors {
  border-color: #fff90c;
}

.home-colors {
  color: #fff90c;
}

.home-bd-colors:hover {
  border-color: #fff90c;
  background-color: #fff90c;
}

.home-bd-colors:hover>.home-colors {
  color: black;
}

.home-bd-colors-active {
  border-color: #fff90c;
  background-color: #fff90c;
}

.home-colors-active {
  color: black;
}

@media (max-width:768px) {
  .home-bd-colors-active {
    background-color: black;
  }
  .home-colors {
    color: white;
  }
  .home-colors-active {
    color: white;
  }
  .home-bd-colors:hover {
    background: none;
  }
  .home-bd-colors:hover>.home-colors {
    color: white;
  }
}

.locali-bd-colors {
  border-color: #06fbbe;
}

.locali-colors {
  color: #06fbbe;
}

.locali-bd-colors:hover {
  border-color: #06fbbe;
  background-color: #06fbbe;
}

.locali-bd-colors:hover>.locali-colors {
  color: black;
}

.locali-bd-colors-active {
  border-color: #06fbbe;
  background-color: #06fbbe;
}

.locali-colors-active {
  color: black;
}

@media (max-width:768px) {
  .locali-bd-colors-active {
    background-color: black;
  }
  .locali-colors {
    color: white;
  }
  .locali-colors-active {
    color: white;
  }
  .locali-bd-colors:hover {
    background: none;
  }
  .locali-bd-colors:hover>.locali-colors {
    color: white;
  }
}

.eventi-bd-colors {
  border-color: white;
}

.eventi-colors {
  color: white;
}

.eventi-bd-colors:hover {
  border-color: white;
  background-color: white;
}

.eventi-bd-colors:hover>.eventi-colors {
  color: black;
}

.eventi-bd-colors-active {
  border-color: white;
  background-color: white;
}

.eventi-colors-active {
  color: black;
}

@media (max-width:768px) {
  .eventi-bd-colors-active {
    background-color: black;
  }
  .eventi-colors-active {
    color: white;
  }
  .eventi-bd-colors:hover {
    background: none;
  }
  .eventi-bd-colors:hover>.eventi-colors {
    color: white;
  }
}


/*--Colors MOBILE index-----------------------------------------------------------------------------------------------*/

.border-pill-mobile {
  border-radius: 500px;
  border-style: solid;
  border-width: thick;
}

.storia-bd-colors-mobile {
  border-color: #fd0ade;
}

.storia-colors-mobile {
  color: #fd0ade;
}

.storia-bd-colors-active-mobile {
  border-color: #fd0ade;
  background-color: #fd0ade;
}

.storia-colors-active-mobile {
  color: black;
}

.info-bd-colors-mobile {
  border-color: #fd0ade;
}

.info-colors-mobile {
  color: #fd0ade;
}

.info-bd-colors-active-mobile {
  border-color: #fd0ade;
  background-color: #fd0ade;
}

.info-colors-active-mobile {
  color: black;
}

.home-bd-colors-mobile {
  border-color: #fff90c;
}

.home-colors-mobile {
  color: #fff90c;
}

.home-bd-colors-active-mobile {
  border-color: #fff90c;
  background-color: #fff90c;
}

.home-colors-active-mobile {
  color: black;
}

.locali-bd-colors-mobile {
  border-color: #06fbbe;
}

.locali-colors-mobile {
  color: #06fbbe;
}

.locali-bd-colors-active-mobile {
  border-color: #06fbbe;
  background-color: #06fbbe;
}

.locali-colors-active-mobile {
  color: black;
}

.eventi-bd-colors-mobile {
  border-color: white;
}

.eventi-colors-mobile {
  color: white;
}

.eventi-bd-colors-active-mobile {
  border-color: white;
  background-color: white;
}

.eventi-colors-active-mobile {
  color: black;
}


/*--Text MOBILE index--*/

.text-index-mobile {
  width: 100%;
}


/*Font navbar*/


/*
.navbar-font {
    font-size: 30px;
}
 */


/*--Basic colors--*/

.border-yellow {
  border-color: #fff90c !important;
}

.background-yellow {
  background-color: #fff90c !important;
}

.color-yellow {
  color: #fff90c;
}

.color-white {
  color: white;
}

.color-black {
  color: black;
}

<head>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  <!--Righteurs-->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
</head>

<body>
  <!--NAVBAR-->
  <nav class="navbar navbar-expand-lg navbar-dark background-black">
    <div class="container-fluid">

      <a class="navbar-brand active  d-inline-block" href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-person-circle pb-1" viewBox="0 0 16 16">
                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
            </svg>
        <span class="mb-0 font-righteus">Accedi</span></a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

      <div class="collapse navbar-collapse justify-content-center font-righteus" id="navbarNavAltMarkup">
        <div class="navbar-nav">

          <a class="nav-link p-md-3 m-md-3 border-pill home-bd-colors-active h4" aria-current="page" href="#"><span class="home-colors-active">Home</span></a>
          <a class="nav-link p-md-3 m-md-3 border-pill storia-bd-colors h4" href="pages/storia.html"><span class="storia-colors">Storia</span></a>
          <!--    <a class="nav-link p-md-3 m-md-3 border-pill info-bd-colors h4" href="#"><span class="info-colors">Info</span></a> -->
          <a class="nav-link p-md-3 m-md-3 border-pill locali-bd-colors h4" href="pages/locali.html"><span class="locali-colors">Locali</span></a>
          <a class="nav-link p-md-3 m-md-3 border-pill eventi-bd-colors h4" href="pages/eventi.html"><span class="eventi-colors">Eventi</span></a>

        </div>
      </div>

    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-5

【解决方案1】：

更改以下内容...

<a class="navbar-brand active  d-inline-block" href="#">

到这里……

<a class="navbar-brand active position-absolute" href="#">

这会将品牌从正常流程中移除，因此不会干扰其他元素。但是要小心这一点，因为如果您使用它，品牌可能会与其他元素重叠 - 只是靠耳朵玩。

https://getbootstrap.com/docs/5.1/utilities/position/

【讨论】：