Iphone 移动设备的网站设计和编码_Iphone_Html_Ipad_Twitter Bootstrap_Navbar

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

iphone html ipad twitter-bootstrap

Iphone 移动设备的网站设计和编码,iphone,html,ipad,twitter-bootstrap,navbar,Iphone,Html,Ipad,Twitter Bootstrap,Navbar,我正在尝试为移动设备开发一个网站我目前正在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-tar

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

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

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

根据使用“导航栏固定顶部”时的提示

“添加.navbar固定顶部，并记住考虑隐藏区域在它下面，至少添加40px的填充物。确保要在核心引导CSS之后和可选响应性CSS。”

因此，您可以将bootstrap-responsive.css包含在正文填充css之后，就像在示例（）中一样

或者使用@media query调整机身以适应更小的屏幕（手机、平板电脑）

使用@media query演示：

检查您的

.navbar

是否有

z-index

。如果有，添加更高的数字并测试。如果没有，请添加类似于

z-index:9999

的内容。并对

.container

执行相同操作，但添加

z-index:0。
body {padding-top:40px}

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