Question

基本上，我正在使用Bootstrap 4为页脚编码，为此我已经完成了表格/表格的处理。无论如何，由于某种原因，表格的第一行和第二行之间没有间距。另一方面，所有其他列之间都存在IS间距。有人可以帮我吗？这是Codepen： https://codepen.io/rooiboQuality/pen/oNgdyPY

HTML：

<footer>

    <div class="footer-text">

        <div class="footer-main container-fluid">

            <div class="row">

                <div class="col-sm">
                    <p>Specialer</p>
                </div>
                <div class="col-sm"></div>
                <div class="col-sm"></div>
                <div class="col-sm">
                    <p>Kontakt</p>
                </div>

            </div>

            <div class="row">

                <div class="col-sm"><a href="#">Akupunktur</a></div>
                <div class="col-sm"><a href="#">Ansigtsmassage</a></div>
                <div class="col-sm"><a href="#">Ledmanipulation</a></div>
                <div class="col-sm"><a href="mailto:kontakt@sjaeloglegme.dk">kontakt@sjaeloglegeme.dk</a></div>

            </div>

            <div class="row">

                <div class="col-sm"><a href="#">Piskesmældsbehandling</a></div>
                <div class="col-sm"><a href="#">Hovedbundsmassage</a></div>
                <div class="col-sm"><a href="#">Kinesiotape</a></div>
                <div class="col-sm"><p>Telefon: +45 41 42 41 08</p></div>

            </div>

            <div class="row">

                <div class="col-sm"><a href="#">Akut skadesbehandling</a></div>
                <div class="col-sm"><a href="#">Migræner</a></div>
                <div class="col-sm"><a href="#">Manuel terapi</a></div>
                <div class="col-sm"><p>Lene Haus Vej 21 st. tv</p></div>

            </div>

            <div class="row">

                <div class="col-sm"><a href="#">Triggerpunktsbehandling</a></div>
                <div class="col-sm"><a href="#">Bindevævsmassage</a></div>
                <div class="col-sm"><a href="#">Medicinsk akupunktur</a></div>
                <div class="col-sm"><p>CVR: 33690193</p></div>

            </div>

        </div>

        <div class="footer-info container-fluid">

            <p>Sjæl og Legeme Helsepartner V/ Jens Erik Pedersen  |  Lene Haus Vej 21 1. sal tv.  |  7430  |  Ikast  |  Tlf. 41 42 41 08  |  kontakt@sjaeloglegeme.dk</p>

        </div>

    </div>

    <img src="https://i.ibb.co/QcsqrzG/man.png" alt="man">

</footer>

CSS（+引导程序）：

    footer {
    padding: 60px 0 20px 0;
    background-color: #000;
    color: #fff;
    position: relative;
}

.footer-text {
    width: 75%;
    display: inline-block;
}

footer img {
    position: absolute;
    right: 35px;
    bottom: 0;
    width: 20%;
}

footer .container-fluid {
    width: 100%;
    margin: 0;
    margin-left: 60px;
}

footer p, footer a {
    color: #BFBFBF;
}

footer .row:nth-child(1) .col-sm p {
    font-size: 1.3em;
    color: #fff;
}

.footer-info {
    margin-top: 35px;
}

Answer 1

默认情况下，margin-bottom: 1rem;标签有<p>，您在除第一行以外的所有其他行中使用。这就是所有其他行之间都留有间距的原因。

您可以在CSS中为<a>和<p>提供一个边距，以覆盖默认样式。

footer p, footer a {
    display:block; //making anchor block element otherwise it won't take margin 
    margin: 1em 0;
    color: #BFBFBF;
}

希望这会有所帮助！

引导网格的前两行之间没有空格

1 个答案: