2016-11-18 79 views
1

我有一个问题在正确固定的div和左下角之间的间隙。在桌面上,他们看起来不错,divs在角落里。但是,在移动时,div是固定的,并与其余内容重叠。我尝试了一个保证金底部,但没有解决问题。如何创建一个固定的底部的div和包装

我要的是,这两个信息的div是固定的,但是当你在移动,有对信息的div和DIV CLASS =“包装”之间的差距。

这里是我的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/> 
    [email protected]</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> 

这是我用

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

回答

0

您只使用col-md规则的CSS,设置col-smcol-xs属性到HTML,它应该解决手机

问题
相关问题