在移动设备上使用bootstrap的CSS对齐问题

Question

我正在使用http://www.inboundio.com，并且在使用引导进行造型时，在移动设备上检查它时，我注意到顶层菜单链接与另一个图像重叠（请参阅http://i.imgur.com/X8FFuaz.png），我该如何解决此问题（仪表板链接看起来不太敏感）？

下面是HTML代码

<a href="/dashboard" class="btn btn-success pull-right login-btn">Dashboard</a> 
<div class="top-menu pull-right home-menu" id="main-menu"> 
    <ul class="nav"> 
    <li><a href="/features">Features</a></li> 
    <li><a href="/plans">Pricing</a></li> 
    <li><a href="/demo">Demo</a></li>  
    </ul> 
</div> 

这里是CSS

body.frontend .header .top-menu { 
margin-top: 5px; 
padding: 5px 10px; 
position: absolute; 
left: 50%; 
margin-left: 140px; 
} 

.nav { 
margin-left: 0; 
margin-bottom: 20px; 
list-style: none; 
} 

.pull-right { 
float: right; 
} 

Answer 1

移除body.frontend .header .top-menuposition:absloute在你的CSS

body.frontend .header .top-menu { 
margin-top: 5px; 
padding: 5px 10px; 
}