Question

我在左下角的固定div有问题。在桌面上他们看起来很好，div在角落里。但是，在移动设备上时，div是固定的，并与其他内容重叠。我尝试了一个保证金底部，但没有解决问题。

我想要的是两个信息div是固定的但是当你在移动设备上时，信息div和div class =＆＃34之间存在间隙;＆＃34;。

这是我的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和包装之间创建间隙

1 个答案: