Question

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

我目前正在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上，文本位于导航栏后面。

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

Answer 1

根据Bootstrap docs使用'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

移动设备的网站设计和编码

1 个答案: