Question

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

我已经使用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;
}

Answer 1

因为您的ul.social的下边距为1rem。

只需添加此CSS即可修复：

ul.social {
margin-bottom: 0;
}

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

1 个答案: