时间戳

首页 > 解决方案 > 是否可以从列中删除多余的空间？引导程序 4

html - 是否可以从列中删除多余的空间？引导程序 4

问题描述

我的导航栏中有多余的空间问题。如果您能帮助我删除“col”中的多余空间，我会将代码记录下来。我想删除那个额外的空间，这样它们就可以彼此靠近。问题之一是最后一个“立即购买”我对“现在”部分有很大的挣扎，因为当我做一些更大的事情时，它会把它放在下面。

有图https://prnt.sc/w9e4w9

/* 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>

标签： htmlcssbootstrap-4

解决方案

如果我没有误会您的意思，这就是您的解决方案-

<!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>

推荐阅读