如何在固定底部 div 和包装之间创建间隙

Question

我在右下角和左下角固定 divs 时遇到问题。在桌面上它们看起来不错，divs 在角落里。但是，在移动设备上，div 是固定的并与其余内容重叠。我尝试了 margin-bottom 但这并没有解决问题。

我想要的是两个信息 div 是固定的，但是当你在移动设备上时，信息 div 和 div class="wrap"。

这是我的 html

<div class="wrap">
<h1 class="titel">Media Media B.V.</h1>
</div>
<div class="info container">
<div class="row">
  <div class="address col-md-6">
    <p><strong>Media Media B.V.</strong><br/> 
    Vriendsgracht 77<br/>
    2542AH Utrecht<br/>
    The Netherlands</p>
    <p><abbr title="Phone">Skype:</abbr> john.doe<br/>
    info@media.nl</p>
  </div>
  <div class="vat col-md-6">
     <p><abbr title="Chamber of Commerce">CoC:</abbr> 4444444<br/>
     <abbr title="Value Added Tax">VAT:</abbr> NL444444444</p>
  </div>
</div>
</div>

这是我用过的css

    body {
    background-color: #1A4C62;
    height: 100%;
}
.wrap {
    background-color: blue;
    margin-bottom: 7.5%;
    position: relative;
}
.titel {
    color: #fff;
    font-family: 'Lato', sans-serif;
    text-align: center;
    padding-top: 7.5%;
}
.titel2 {
        color: #fff;
    font-family: 'Lato', sans-serif;
    text-align: center;
}
.logo {
    margin: 0 auto;
}
.ondertitel {
    color: #fff;
    font-family: 'Lato', sans-serif;
    text-align: center;
}

.info {
    color: #fff;
    font-family: 'Lato', sans-serif;
}
div.info {
    width: 100%;
}
div.info div p {
    margin: 2px 0px 5px 0px;
}
div.info div strong {
    display: inline-block;
    font-size: 13px;
}
div.info .address {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 150px;
    padding: 10px 25px 10px 15px;
    border: 1px solid #fff;
}
div.info .vat {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 150px;
    padding: 10px 15px 10px 25px;
    border: 1px solid #fff;
}

Answer 1

您只使用 col-md 规则，为您的 HTML 设置 col-sm 和 col-xs 属性，它应该可以解决移动设备的问题

如何在固定底部 div 和包装之间创建间隙

How can I create a gap between a fixed bottom divs and a wrap

html

css

position