Bootstrap导航栏项目不在中心
我遇到了一个网站，我使用html css和bootstrap对其进行了克隆。但是我遇到的问题是我的导航栏无法正常工作。我需要帮助，我需要将导航栏中的项目居中，而社交图标则在右侧。我是这个东西的新手，谁能帮我吗？
这是我试图克隆
这是我的代码
/* #navbarNav {
padding-bottom: 36px;
padding-top: 54px;
} */
.nav-img {
width: auto;
max-width: 100%;
max-height: 69px;
}
.navbar-custom {
background-color: #000000;
}
.title-div {
position: absolute;
z-index: 1;
top: 461px;
}
.home-heading {
background-color: rgba(255, 255, 255, 0.5);
color: black;
}
.main-image {
/* background-image: url(../img/ill.jpg); */
width: 100%;
height: 82%;
position: relative;
z-index: -1;
}
.navbar {
padding: 100px;
background-color: black;
}
.navbar-brand {
margin: 0px 0px 0px 30px;
}
.navbar-toggler {
filter: invert(100%);
}
.navbar-nav li {
float: left;
}
.nav-item a {
display: block;
text-align: center;
}
.instagram {
filter: invert(100%);
padding: 6px;
}
.facebook {
filter: invert(100%);
padding: 6px;
}
.email {
filter: invert(100%);
padding: 6px;
}
.phone-call {
filter: invert(100%);
}
/* .mid{
margin: 0px 0px 0px 200px;
padding: 0px 0px 0px 235px;
} */
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
background-color: #000;
}
li {
float: left;
/* border-right: 1px solid #bbb; */
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: right;
padding: 14px 16px;
text-decoration: none;
}
.logo {
/* width: 133px;
height: 69px; */
width: auto;
max-width: 100%;
max-height: 69px;
margin-top: 9px;
margin-bottom: 17px;
margin-left: 16px;
}
.bdy-img{
width: 45% !important;
height: auto !important;
padding-top: 96px;
padding-left: 75px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto:wght@300&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital@1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- <nav class="navbar navbar-expand-lg navbar-custom " >
<img class="navbar-brand nav-img" src="img/logo-nav.jpg" alt="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav justify-content-center" >
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav> -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="img/logo-nav.jpg" class="logo" alt="" loading="lazy" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<div class="cintainer-fluid">
<div class="row">
<div class="span6" style=" float: none; margin: 0 auto;">
<ul class=" navbar-nav ">
<li>
<a class="nav-link" href="">Shop</a>
</li>
<li>
<a class="nav-link" href=""> I Love Lables</a>
</li>
<li>
<a class="nav-link" href=""> About</a>
</li>
<li>
<a class="nav-link" href=""> How It Works</a>
</li>
<ul class="list2">
<li>
<a class="nav-link" href=""> Charities</a>
</li>
<li>
<a class="nav-link" href=""> Sell With Us</a>
</li>
<li>
<a class="nav-link" href=""> News</a>
</li>
<li>
<a class="nav-link" href=""> Designers</a>
</li>
</ul>
<ul class="list3">
<li>
<a class="nav-link" href=""> Contact</a>
</li>
</ul>
</div>
</div>
</div>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/instagram.png" class="instagram" width="50" height="50" alt=""
loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/email.png" class="email" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/facebook.png" class="facebook" width="50" height="50" alt=""
loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/phone-call.png" class="phone-call" width="50" height="50" alt=""
loading="lazy" />
</a>
</li>
</ul>
</div>
</nav>
<!-- <div class="main-bdy-div align-items-center" >
<div class="container-fluid title-div home-heading">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;" >I love labels</h1>
</div>
<div class="container-fluid title-div " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">New Zealand's
Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
<img class="main-image" src="img/ill.jpg" alt="">
</div> -->
<div class="main-img">
<img class="main-image" src="img/ill.jpg" alt="">
</div>
<div class="container-fluid justify-content-start">
<div class="container-fluid title-div " style=" text-align: center; width: 28%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;">I love labels
</h1>
</div>
<div class="container-fluid title-div justify-content-between " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); top: 576px; ">
<h1 class=""
style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">
New Zealand's
Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
</div>
<!-- main body section -->
<div class="container-fluid">
<div>
<img class="bdy-img" src="img/IMG_0018.jpg" style=" width: 100%;
height: auto;" alt="">
<div class="d-flex align-items-start justify-content-end">
<h1 style="text-align: center;">Our Unique Approach.</h1>
</div>
</div>
</div>
<!-- bootstrap js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>
2 个答案:
答案 0 :(得分：1)
您可以使用'justify-content-center'类将列表项与中心对齐：
<ul class="nav justify-content-center">
和'nav justify-content-end'将项目向右对齐：
<ul class="nav justify-content-end">
答案 1 :(得分：1)
请以整页模式查看代码段。
我只是想为您的问题提供帮助，在您尝试学习时，仍有一些我没有尝试解决的问题。
以下是更改：
1在下面的标记中添加了justify-content-md-center
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo01">
2将上述标记的子代调整为仅具有两个ul
3在上面的两个ml-auto标签中添加了ul CSS类
/* #navbarNav {
padding-bottom: 36px;
padding-top: 54px;
} */
.nav-img {
width: auto;
max-width: 100%;
max-height: 69px;
}
.navbar-custom {
background-color: #000000;
}
.title-div {
position: absolute;
z-index: 1;
top: 461px;
}
.home-heading {
background-color: rgba(255, 255, 255, 0.5);
color: black;
}
.main-image {
/* background-image: url(../img/ill.jpg); */
width: 100%;
height: 82%;
position: relative;
z-index: -1;
}
.navbar {
padding: 100px;
background-color: black;
}
.navbar-brand {
margin: 0px 0px 0px 30px;
}
.navbar-toggler {
filter: invert(100%);
}
.navbar-nav li {
float: left;
}
.nav-item a {
display: block;
text-align: center;
}
.instagram {
filter: invert(100%);
padding: 6px;
}
.facebook {
filter: invert(100%);
padding: 6px;
}
.email {
filter: invert(100%);
padding: 6px;
}
.phone-call {
filter: invert(100%);
}
/* .mid{
margin: 0px 0px 0px 200px;
padding: 0px 0px 0px 235px;
} */
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
background-color: #000;
}
li {
float: left;
/* border-right: 1px solid #bbb; */
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: right;
padding: 14px 16px;
text-decoration: none;
}
.logo {
/* width: 133px;
height: 69px; */
width: auto;
max-width: 100%;
max-height: 69px;
margin-top: 9px;
margin-bottom: 17px;
margin-left: 16px;
}
.bdy-img {
width: 45% !important;
height: auto !important;
padding-top: 96px;
padding-left: 75px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital@1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- <nav class="navbar navbar-expand-lg navbar-custom " >
<img class="navbar-brand nav-img" src="img/logo-nav.jpg" alt="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav justify-content-center" >
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav> -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="img/logo-nav.jpg" class="logo" alt="Logo Img" loading="lazy" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo01">
<ul class=" navbar-nav ml-auto">
<li>
<a class="nav-link" href="">Shop</a>
</li>
<li>
<a class="nav-link" href=""> I Love Lables</a>
</li>
<li>
<a class="nav-link" href=""> About</a>
</li>
<li>
<a class="nav-link" href=""> How It Works</a>
</li>
<li>
<a class="nav-link" href=""> Charities</a>
</li>
<li>
<a class="nav-link" href=""> Sell With Us</a>
</li>
<li>
<a class="nav-link" href=""> News</a>
</li>
<li>
<a class="nav-link" href=""> Designers</a>
</li>
<li>
<a class="nav-link" href=""> Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/instagram.png" class="instagram" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/email.png" class="email" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/facebook.png" class="facebook" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/phone-call.png" class="phone-call" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
</ul>
</div>
</nav>
<!-- <div class="main-bdy-div align-items-center" >
<div class="container-fluid title-div home-heading">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;" >I love labels</h1>
</div>
<div class="container-fluid title-div " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">New Zealand's
Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
<img class="main-image" src="img/ill.jpg" alt="">
</div> -->
<div class="main-img">
<img class="main-image" src="img/ill.jpg" alt="">
</div>
<div class="container-fluid justify-content-start">
<div class="container-fluid title-div " style=" text-align: center; width: 28%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;">I love labels
</h1>
</div>
<div class="container-fluid title-div justify-content-between " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); top: 576px; ">
<h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">
New Zealand's Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
</div>
<!-- main body section -->
<div class="container-fluid">
<div>
<img class="bdy-img" src="img/IMG_0018.jpg" style=" width: 100%;
height: auto;" alt="">
<div class="d-flex align-items-start justify-content-end">
<h1 style="text-align: center;">Our Unique Approach.</h1>
</div>
</div>
</div>
<!-- bootstrap js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？