我是一个业余爱好者，我正在练习。但是，当我编写此代码时，我无法获得菜单项的边距。
这是我的项目：
body {
background: #f5f5f5;
}
.top-f{
font-size: .9rem;
}
.h1brand{
color: #0c2e8a;
font-size: 2.8rem;
}
.logo h1{
margin: 10px 0;
}
.nav-icon{
margin: 0 0;
}
.logo span{
color: #50d8af;
}
.logo:hover{
text-decoration: none;
}
.nav-menu ul li a{
color: #555;
font-weight: 600;
font-size: 1.05rem;
}
.dropdown-menu{
min-width: 15rem;
}
.dropdown-menu a:hover{
background: #9fcdff;
}
.background-img{
background-size: cover;
width: 100%;
min-height: 65vh;
max-height: auto;
background-repeat: no-repeat;
opacity: .4;
position: absolute;
}
.headcolor{
color: #0c2e8a;
}
.headcolor2{
color: #50d8af;
}
.btn{
border-radius: 0px;
}
.mc{
text-align: center;
align-content: center;
}
.navbar-toggler{
border: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ"
crossorigin="anonymous">
</head>
<body>
<body>
<div class="container-fluid">
<div class="row border-bottom top-f">
<div class="container">
<div class="row">
<!--email and phonenumber-->
<div class="col-lg-5 col-md-8 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mt-3 mb-3 text">
<li class="list-inline-item mr-3 border-right pr-3">
<i class="fa fa-phone text-secondary"></i>
<span class="ml-2 text-secondary">09905645285</span>
</li>
<li class="list-inline-item mr-3">
<i class="fas fa-envelope text-secondary"></i>
<span class="ml-2 text-secondary">parsaking@example.com</span>
</li>
</ul>
</div>
<!--social media-->
<div class="col-lg-7 col-md-4 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mb-3 mt-3 text-secondary float-lg-right">
<li class="list-inline-item pl-2 pr-2 text-secondary">
<i class="fab fa-twitter"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-facebook-f"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-instagram"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-google-plus-g"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-linkedin-in"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-md navbar-light ">
<div class="row">
<!-- Brand -->
<a href="#" class="display-4 font-weight-bold logo col-xl-6 col-lg-6 float-left">
<h1 class="h1brand ">Reve
<span>al</span>
</h1>
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon nav-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse col-xl-6 col-lg-6 " id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> DROPDOWN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!--start section offer-->
<div class="container-fluid">
<div class="row">
<img src="img/3.jpg" class="background-img">
<div class="col-12 mc mt-5">
<h2 class="display-3 font-weight-bold headcolor">making
<span class="headcolor2">your ideas </span>
<br>happen</h2>
</div>
<div class="col-12 mc mt-5">
<button class=" btn btn-lg btn-primary">Get GetSarted</button>
<button class="btn btn-lg btn-secondary ml-4">Our Projects</button>
</div>
</div>
</div>
<!--scripts-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
请问您能帮助我让xl和lg正确浮动并做出响应吗？
我尽一切努力解决了这个问题，但每次都失败了。
这是用引导程序制作的复兴主题。
它想要我发送更多文本，而我的英语不是很好。哦，我怎么知道？
我对CSS和HTML不太了解，这是一场灾难。
非常感谢。
答案 0 :(得分：0)
我对您的结构进行了一些更改以使其对齐。截至目前，您的导航栏已对齐。请确认是否可以解决您的问题。
body {
background: #f5f5f5;
}
.top-f {
font-size: .9rem;
}
.h1brand {
color: #0c2e8a;
font-size: 2.8rem;
}
.logo h1 {
margin: 10px 0;
}
.nav-icon {
margin: 0 0;
}
.logo span {
color: #50d8af;
}
.logo:hover {
text-decoration: none;
}
.nav-menu ul li a {
color: #555;
font-weight: 600;
font-size: 1.05rem;
}
.dropdown-menu {
min-width: 15rem;
}
.dropdown-menu a:hover {
background: #9fcdff;
}
.background-img {
background-size: cover;
width: 100%;
min-height: 65vh;
max-height: auto;
background-repeat: no-repeat;
opacity: .4;
position: absolute;
}
.headcolor {
color: #0c2e8a;
}
.headcolor2 {
color: #50d8af;
}
.btn {
border-radius: 0px;
}
.mc {
text-align: center;
align-content: center;
}
.navbar-toggler {
border: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>
<body>
<div class="container-fluid">
<div class="row border-bottom top-f">
<div class="container">
<div class="row">
<!--email and phonenumber-->
<div class="col-lg-5 col-md-8 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mt-3 mb-3 text">
<li class="list-inline-item mr-3 border-right pr-3"><i class="fa fa-phone text-secondary"></i><span class="ml-2 text-secondary">09905645285</span></li>
<li class="list-inline-item mr-3"><i class="fas fa-envelope text-secondary"></i><span class="ml-2 text-secondary">parsaking@example.com</span></li>
</ul>
</div>
<!--social media-->
<div class="col-lg-7 col-md-4 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mb-3 mt-3 text-secondary float-lg-right">
<li class="list-inline-item pl-2 pr-2 text-secondary"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-facebook-f"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-instagram"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-google-plus-g"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<nav class="navbar navbar-expand-md navbar-light ">
<!-- Brand -->
<a href="#" class="display-4 font-weight-bold logo">
<h1 class="h1brand ">Reve<span>al</span></h1>
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="true">
<span class="navbar-toggler-icon nav-icon"></span>
</button>
<!-- Navbar links -->
<div class="navbar-collapse collapse show" id="collapsibleNavbar" style="">
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> DROPDOWN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<!--start section offer-->
<div class="container">
<div class="row">
<img src="img/3.jpg" class="background-img">
<div class="col-12 mc mt-5">
<h2 class="display-3 font-weight-bold headcolor">making <span class="headcolor2">your ideas </span><br>happen</h2>
</div>
<div class="col-12 mc mt-5">
<button class=" btn btn-lg btn-primary">Get GetSarted</button>
<button class="btn btn-lg btn-secondary ml-4">Our Projects</button>
</div>
</div>
</div>
<!--scripts-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>