代码之家 › 专栏 › 技术社区 › MK-DK

不改变标题的位置卡

twitter-bootstrap css html

MK-DK · 技术社区 · 7 年前

我正在用bootstrap 3制作一个联系人支持页面。我在头像的顶部放置了一张卡片,并在 140px 卡片上写着:

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

See a demosite here .

标题:“3个Hurtige提示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>

3 回复 | 直到 7 年前

nejc.m 7 年前

最简单的解决方案是添加 margin-bottom: -140px; 到你已经拥有的卡片区 bottom: 140px; .

但这不是唯一的解决办法。

eskawl 7 年前

出现空白的原因是 position 被设置为 relative 上 card-section . 相对元素占用了正常文档流中所需的空间,然后调整它们的位置。

要解决这个问题,您应该将 卡片部分 在另一个高度固定的分区。

至于文档流,next row元素只涉及wrapper div,而不涉及实际的相对位置 卡片部分 .

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

DCR 7 年前

摆脱:

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