Html 使用引导4在导航栏div项之间添加相等的空间
我想在DIV1项目之间留出一些空间。如何在导航栏中的DIV1链接之间正确添加空间 如果我运行这个简单的代码,我会得到“约会”和“联系人”的连接或重叠 这是我的导航栏:Html 使用引导4在导航栏div项之间添加相等的空间,html,css,bootstrap-4,Html,Css,Bootstrap 4,我想在DIV1项目之间留出一些空间。如何在导航栏中的DIV1链接之间正确添加空间 如果我运行这个简单的代码,我会得到“约会”和“联系人”的连接或重叠 这是我的导航栏: <header> <Navbar expand="lg"> <a href="#home"><img src={require("../Assets/Images/hair_salon_logo.jpg").defau
<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>
我认为向Nav元素添加“justify content-between”类就可以了,因为它同时包装了两个div(div1和div2)。我会把它们分离到导航的边缘
.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;
}