时间戳

首页 > 解决方案 > 定位卡片而不改变标题

html - 定位卡片而不改变标题

问题描述

我正在使用 Bootstrap 3 制作联系支持页面。我在标题图像的顶部放置了一张卡片，并140px在卡片上设置了一个填充：

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

在此处查看演示站点。

标题：“3 hurtige Tips før du ringer til os”现在被推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>

标签： htmlcsstwitter-bootstrap

解决方案

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

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

推荐阅读