移动设备上引导程序的CSS对齐问题

时间:2013-06-25 13:54:52

标签: css css3 twitter-bootstrap

我正在使用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;
}

1 个答案:

答案 0 :(得分:4)

从您的css中的position:absloute删除body.frontend .header .top-menu

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