是否有可能从列中删除额外的空间？自举4
是否有可能从列中删除额外的空间？自举4
提问于 2020-12-24 21:32:41
我的导航栏有额外空间的问题。如果您能帮我删除"col“中的额外空间，我将把代码放下来。我想去掉多余的空间，这样他们就能更接近对方了。问题之一是最后一个“现在就买”，我和“现在”部分有一个很大的斗争，因为当我做一些更大的事情时，它会放在下面。
/* Navigation Bar */
.navigation{
background-color: white;
padding: 33px 0;
text-align: center;
font-family: 'Work Sans', sans-serif;
font-weight: 500;
}
.navigation .row > div > a{
text-decoration: none;
}
.navigation span:hover{
color: black;
}
.navigation .logo img{
position: relative;
}
.navigation span{
font-size: 14px;
color: grey;
}
.navigation .logo img{
width: 44px;
}
.navigation .nav-text{
padding: 10px 0;
}
.navigation .ceo-nav{
padding-left: 300px;
}
.navigation .purchase-now{
position: relative;
left: -50px;
} <div class="navigation">
<div class="container-fluid ceo-nav">
<div class="row">
<div class="col-xl-1 logo">
<img src="img/logo.png" alt="Logo">
</div>
<div class="offset-xl-4 col-xl-1 nav-text">
<a href=""><span class="home">HOME</span></a>
</div>
<div class="col-xl-1 nav-text">
<a href=""><span class="work">WORK</span></a>
</div>
<div class="col-xl-1 nav-text">
<a href=""><span class="about">ABOUT</span></a>
</div>
<div class="col-xl-1 nav-text">
<a href=""><span class="blog">BLOG</span></a>
</div>
<div class="col-xl-1 nav-text">
<a href=""><span class="contact">CONTACT</span></a>
</div>
<div class="col-xl-2 nav-text">
<a href=""><span class="purchase-now">PURCHASE NOW</span></a>
</div>
</div>
</div>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-12-25 08:03:47
你能检查一下下面的代码吗？希望它能对你有用。我们刚刚从col-xl-1中删除了nav-text，并给出了填充。您可以根据需要使用填充值来更改此间隔。
请参考以下链接：https://jsfiddle.net/yudizsolutions/1k935u7h/8/
/* Navigation Bar */
.navigation{
background-color: white;
padding: 33px 0;
text-align: center;
font-family: 'Work Sans', sans-serif;
font-weight: 500;
}
.navigation .row > div > a{
text-decoration: none;
}
.navigation span:hover{
color: black;
}
.navigation .logo img{
position: relative;
}
.navigation span{
font-size: 14px;
color: grey;
}
.navigation .logo img{
width: 44px;
}
.navigation .nav-text {
display: block;
padding: 10px 15px;
}
.navigation .ceo-nav{
padding-left: 300px;
}
.navigation .purchase-now{
position: relative;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navigation">
<div class="container-fluid ceo-nav">
<div class="row">
<div class="logo">
<img src="img/logo.png" alt="Logo">
</div>
<div class="offset-xl-4 nav-text">
<a href=""><span class="home">HOME</span></a>
</div>
<div class="nav-text">
<a href=""><span class="work">WORK</span></a>
</div>
<div class="nav-text">
<a href=""><span class="about">ABOUT</span></a>
</div>
<div class="nav-text">
<a href=""><span class="blog">BLOG</span></a>
</div>
<div class="nav-text">
<a href=""><span class="contact">CONTACT</span></a>
</div>
<div class="nav-text">
<a href=""><span class="purchase-now">PURCHASE NOW</span></a>
</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2020-12-25 00:38:09
，如果我不误解你，这就是你的解决方案- -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/* Navigation Bar */
.navigation{
background-color: white;
padding: 33px 0;
text-align: center;
font-family: 'Work Sans', sans-serif;
font-weight: 500;
}
.navigation .row > div > a{
text-decoration: none;
}
.navigation span:hover{
color: black;
}
.navigation span{
font-size: 14px;
color: grey;
}
.nav-item{
width: 110px;
text-align: center;
}
.navigation .nav-text{
padding: 10px 0;
}
</style>
</head>
<body>
<nav class="navigation navbar navbar-expand-xl navbar-light bg-light">
<div class="container-fluid ceo-nav collapse navbar-collapse" id="navbarNav">
<div class="row navbar-nav">
<div class="col-xl-1 nav-item">
<a class="navbar-brand m-0" href="#"><img src="img/logo.png" alt="Logo"></a>
</div>
<div class="offset-xl-4 col-xl-1 nav-text nav-item active">
<a href=""><span class="home">HOME</span></a>
</div>
<div class="col-xl-1 nav-text nav-item">
<a href=""><span class="work">WORK</span></a>
</div>
<div class="col-xl-1 nav-text nav-item">
<a href=""><span class="about">ABOUT</span></a>
</div>
<div class="col-xl-1 nav-text nav-item">
<a href=""><span class="blog">BLOG</span></a>
</div>
<div class="col-xl-1 nav-text nav-item">
<a href=""><span class="contact">CONTACT</span></a>
</div>
<div class="col-xl-2 nav-text nav-item">
<a href=""><span class="purchase-now">PURCHASE NOW</span></a>
</div>
</div>
</div>
</nav>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65443398
复制相关文章
相似问题
腾讯云开发者
