Question

我想在 DIV1 项目之间留一些空间。如何在导航栏中的 DIV1 链接之间正确添加空格？

如果我运行这个简单的代码，我会得到连接或重叠的“约会”和“联系人”。

这是我的导航栏：

<header>
  <Navbar expand="lg">
    <a href="#home"><img src={require("../Assets/Images/hair_salon_logo.jpg").default}/></a>
  <Navbar.Toggle aria-controls="basic-navbar-nav" />
  <Navbar.Collapse id="basic-navbar-nav">
    <Nav className="mr-auto">
    <div> <!-- DIV 1-->
      <Nav.Link href="#home">Home</Nav.Link>
      <Nav.Link href="#services">Services</Nav.Link>
      <Nav.Link href="#stylists">Stylists</Nav.Link>
      <Nav.Link href="#appointment">Appointment</Nav.Link>
      <Nav.Link href="#contact">Contact</Nav.Link>
      </div>
      <div>  <!-- DIV 2-->
      <Nav.Link href="#" id="twitter"><TwitterOutlined /></Nav.Link>
      <Nav.Link href="#" id="facebook"><FacebookOutlined /></Nav.Link>
      <Nav.Link href="#" id="youtube"><YoutubeOutlined /></Nav.Link>
      <Nav.Link href="#" id="pause"><PauseOutlined /></Nav.Link>
      <Nav.Link href="#" id="search"><SearchOutlined /></Nav.Link>
      </div>
    </Nav>
  </Navbar.Collapse>
  </Navbar>
</header>

CSS

.navbar-nav {
  flex-direction: row;
  font-family: Open Sans;
  font-size: 20px;
  font-weight: 400;
  width: 100%;
  overflow: auto;
  padding-top: 0px !important;
  justify-content: space-between;
}
.mr-auto {
  display: flex;
  flex-direction: row;
}
.mr-auto > div {
  display: flex;
  flex-direction: row;
}
.links{
word-spacing: 20px;
padding-right: 20px;
}
.navbar-nav a {
  float: left;
  color: black !important;
  font-size: 17px;
  width: 25%; 
  text-align: center; 
}
.navbar-nav a:hover {
cursor: pointer;
color: red !important;
} 
.navbar-nav a.active {
  color: red !important;
}
@media screen and (max-width: 500px) {
  .navbar-nav a {
    float: none;
    display: block;
    width: 100%;
    text-align: left; 
  }
}
.navbar-nav #twitter:hover{
  cursor: pointer;
  color: #55ACEE !important;
}
.navbar-nav #facebook:hover{
  cursor: pointer;
  color: #3B5998 !important;
}
.navbar-nav #youtube:hover{
  cursor: pointer;
  color: #bb0000 !important;
}
.navbar-nav #pause:hover{
  cursor: default;
  color: black !important;
}

Answer 1

我认为向您的 Nav 元素添加“justify-content-between”类可以完成这项工作，因为它包装了您的两个 div（div1 和 div2）。我会将它们分开到 Nav 的边缘。

使用 Bootstrap 4 在导航栏 div 项目之间添加相等的空间

1 个答案: