Question

我正在使用Bootstrap 3建立联系支持页面。我已将卡放置在标题图像的顶部，并在卡上的140px上设置了填充：

.card-section { 
        position: relative; 
        bottom: 140px; 
    }

See a demosite here。

标题：“ {ringer til os的3个提示）”现在被下推140px，我希望该标题正好位于卡片结束的位置。

有人知道我该如何解决吗？

代码很长，所以我只发布了相关代码。请查看整个页面的演示站点。

.mk-page-header { 
        background: linear-gradient(rgba(0,0,0,.7), rgba(0,0,0,.7)), url(http://koed.dk/Static/Cms/333780ed-bd2b-4513-9186-af155e172a57.jpg)
        no-repeat; 
        position: relative; 
        background-size: cover; 
    }
    
    .page-caption { 
        padding-top: 170px; 
        padding-bottom: 174px; 
    }
    .page-title { 
        font-size: 46px; 
        line-height: 1; 
        color: #fff; 
        font-weight: 600; 
        text-align: center; 
    }
    
    .card-section { 
        position: relative; bottom: 140px; 
    }
    .card-block { 
        padding: 40px 80px 10px 80px;
        box-shadow: 20px 20px 50px grey;
    }
    .section-title { 
        margin-bottom: 60px;
    }

<div class="mk-page-header">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="page-caption">
                    <h1 class="page-title">KONTAKT VORES SUPPORT</h1>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Card Section -->
<div class="card-section">
    <div class="container">
        <div class="card-block" style="background-color: white;">
            <div class="contact-icon row">
                <div class="section-title">
                    <h2>HAR DU SPØRGSMÅL?</h2>
                    <p>KOED har siden starten i 1993 beskæftiget sig udelukkende med BMW, og denne omfattende erfaring og viden vil vi gerne dele med dig. Vores store viden om BMW gør os i stand til at give dig svar på næsten enhver forespørgsel om mærket, hvad enten det handler om reservedele, tilbehør, hjælp til specialopgaver, guides til reparationer og meget mere.</p>
                </div>
                <div class="col-sm-12">
                    <div class="contact-icon row">
                        <div class="col-xs-4">
                            <img class="img-responsive-mk center-block" src="https://koed.dk/Static/Cms/6dfe32ba-7cff-443d-ab73-016dd2f6dca7.jpg"></img>
                            <h3 style="text-align:center;">Ring til os</h3>
                        </div>
                        <div class="col-xs-4">
                            <img class="img-responsive-mk center-block"  src="https://koed.dk/Static/Cms/57e5b8a2-871d-487f-90e4-ae8b8d170ca2.jpg"></img>
                            <h3 style="text-align:center;">Skriv til os</h3>
                        </div>
                        <div class="col-xs-4">
                            <img class="img-responsive-mk center-block"  src="https://koed.dk/Static/Cms/3caa853e-7da3-4e1f-9aa2-a04ee71901c9.jpg"></img>
                            <h3 style="text-align:center;">Facebook</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

最简单的解决方案是将margin-bottom: -140px;也添加到您已经拥有bottom: 140px;的.card部分。

但这不是唯一的解决方案。

Answer 2

出现空白的原因是由于position上的relative被设置为card-section。相对元素会占用正常文档流中所需的空间，然后调整其位置。

要解决此问题，您应该将card-section包裹在另一个具有固定高度的div中。

对于文档流，下一行元素仅与包装div有关，而与实际相对位置的card-section无关。

.card-sec-wrap{
  height: 300px; // Adjust according to your need.
}

Answer 3

摆脱：

.card-section { 
    position: relative; 
    bottom: 140px; 
}

位置卡，无需更改标题

3 个答案: