Html 如何在固定的底部凹陷和包裹之间创建间隙

我在右下角和左下角有一个到固定div的问题。在桌面上，它们看起来不错，沙发在角落里。但是，在移动设备上，div是固定的，并且与其他内容重叠。我尝试了保证金底部，但这并没有解决问题

我想要的是这两个info div是固定的，但是当您在移动设备上时，info 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>

---

您只使用

col-md

规则，将

col-sm

和

col-xs

属性设置到您的HTML，它应该可以解决手机的问题您只使用

col-md

规则，将

col-sm

和

col-xs

属性设置到您的HTML，它应该可以解决手机的问题

    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;
}