0

我正在尝试为移动设备开发一个网站。

我目前正在 iphone 和 ipad 上进行测试，但 ipad 有问题。

我有以下代码：

<body>
    <div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project Name</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-search pull-right" action="">
          <input type="text" class="search-query span2" placeholder="Search">
        </form>
      </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
  </div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
    <div class="container">
    <div class="row-fluid">
      test
    </div>

在 iphone 上，文本“test”在纵向和横向模式下都正确显示在导航栏下方。但是在水平模式下的 ipad 上，文本位于导航栏的后面。

有什么想法可以解决这个问题吗？

4

1 回答 1

1

根据Bootstrap 文档，当您使用“navbar-fixed-top”时..

“添加 .navbar-fixed-top 并记住通过在 .navbar-fixed-top 中添加至少 40px 的内边距来解决其下方的隐藏区域。请务必在核心 Bootstrap CSS 之后和可选的响应式 CSS 之前添加它。 ”

因此，您可以像在示例中那样在主体填充 CSS 之后包含 bootstrap-responsive.css ( http://twitter.github.io/bootstrap/examples/starter-template.html )

body {padding-top:40px}

或使用@media 查询来调整小屏幕（手机、平板电脑）的主体

@media (min-width: 979px) {
    body {
        margin-top:40px;
    }
}

使用@media 查询的演示：http : //bootply.com/60781

于 2013-05-06T15:41:04.077 回答