Дизайн и верстка сайта для мобильных устройств

Я пытаюсь разработать веб-сайт для мобильных устройств.

Я тестирую на 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 текст «тест» отображается правильно под панелью навигации как в портретном, так и в ландшафтном режиме. Но на айпаде в горизонтальном режиме текст сидит за навбаром.

Любые идеи, как я могу это исправить?


iphone html ipad twitter-bootstrap navbar
person imperium2335    schedule 06.05.2013    source источник
comment
Проверьте свой .navbar, если есть z-index. Если есть, добавьте большее число и проверьте. Если нет, добавьте что-то вроде z-index:9999. И сделайте то же самое с .container, но добавьте z-index:0;.   -  person RaphaelDDL    schedule 06.05.2013

Ответы (1)


arrow_upward
1
arrow_downward

Согласно документам Bootstrap, когда вы используете 'navbar-fixed-top'..

"Добавьте .navbar-fixed-top и не забудьте учесть скрытую область под ним, добавив отступ не менее 40 пикселей к . Обязательно добавьте его после основного CSS Bootstrap и перед необязательным адаптивным CSS."

Таким образом, вы можете включить свой bootstrap-responsive.css после 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

person Zim    schedule 06.05.2013