个人中心
gpt4 book ai didi

css - 为什么我使用 Bootstrap 4 在顶行和导航栏之间有一个空格？

转载 作者：行者123 更新时间：2023-11-28 14:24:47 24 4
gpt4 key购买 nike

我的 header 中有一个名为#contact-stripe 的部分，它与导航栏之间有一个空格/间隙。但是，我看不到任何有填充或边距的地方，所以我很困惑。

I put this on CodePen这可能更容易看到。

我已经使用 Chrome 的检查来尝试找到任何使用边距/填充但找不到的东西。

HTML

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Raleway:400,400i,700" rel="stylesheet">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

        <!-- Custom CSS -->
        <link rel="stylesheet" type="text/css" href="/css/style.css">

        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">


        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>Listing Naples</title>
    </head>

    <body>


    <header>

        <!-- Contact Stripe -->
        <section id="contact-stripe">
            <div class="container">
                <span class="float-left"><i class="fas fa-envelope"></i>&nbsp;Email Us</span>
                <span class="float-right">
                    <div class="telephone align-middle">
                        <i class="fas fa-phone d-sm-inline-block align-middle"></i>
                        <span class="telephone-number d-sm-inline-block align-middle">(239) 248-8171</span>
                    </div>

                </span>
                <ul class="social">
                    <li class="align-middle"><i class="fab fa-facebook-square"></i></li>
                    <li class="align-middle"><i class="fab fa-twitter-square"></i></li>
                    <li class="align-middle"><i class="fab fa-instagram"></i></li>
                    <li class="align-middle"><i class="fab fa-linkedin"></i></li>
                </ul>
            </div>
        </section>


        <!-- Navigation -->
        <nav class="navbar navbar-expand-lg navbar-custom">

            <div class="container">

                <a class="navbar-brand" href="#"><img src="https://s3.amazonaws.com/listing-naples/assets/listing-naples-logo.png" alt="Listing Naples Team Logo"></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto">
                        <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="#">Buying</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Selling</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">About our Team</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Blog</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                    </ul>
                    <form class="form-inline my-2 ml-4 my-lg-0">
                        <input class="form-control-sm mr-sm-2 custom-input-sm" type="search" placeholder="MLS Number" aria-label="Search">
                    </form>
                </div><!-- end collapse navbar-collapse div-->

            </div><!-- end container div -->

        </nav>

    </header>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

</body>
</html>

CSS

body {
    font-family: 'Source Sans Pro', sans-serif;
    padding:0;
}

#contact-stripe {
    background-color: #000;
    border-bottom: 1px solid #353a3b;
    color: rgba(255, 255, 255, 0.5);
}

ul.social{
    text-align:center;
    list-style-type:none;
}

ul.social li {
    display:inline-block;
    border-right:1px solid #353a3b;
}

ul.social li:first-of-type {
    border-left: 1px solid #353a3b;
}

.telephone {
    background-color:red;
}

.telephone-number {
    background: teal;
}

.navbar-custom {
    background-color:#000;
}

header li {
    padding: .5rem;
    margin:0;
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.5);
    font-weight:400;
    font-size: 1rem;
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link, .navbar-custom li:hover {
    color: white;
    background-color: orange;
}

.active {
    background-color: orange;
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Lora', sans-serif;
}

h1 {
    font-size: 1.8rem;
    font-weight: bold;
}

最佳答案

因为你的 ul.social 的 margin-bottom 为 1rem。

只需添加此 css 即可修复:

ul.social {
margin-bottom: 0;
}

关于css - 为什么我使用 Bootstrap 4 在顶行和导航栏之间有一个空格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54837465/

24 4 0
文章推荐： ios - 自定义 TableViewCell 的 UIimageView 宽度为单元格宽度的 1/3，单元格高度 = 图像纵横比
文章推荐： ios - 手机上的@Fontface 不显示在手机上
文章推荐： css - 是否可以在通用过渡 Stylus 混合中创建滚动？
文章推荐： ios - 无法将值保存到核心数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com