Twitter bootstrap 3.0 menu/header в мобильной версии

Я строю сайт с Bootstrap 3.0, и когда я тестировал его на своем iPhone, я обнаружил проблему с заголовком. enter image description here Twitter bootstrap 3.0 menu/header в мобильной версии

заголовок - «DatJoke.com» прошел не в том месте. Не могли бы вы помочь мне, что может быть проблемой?

Вот доступ к сайту с помощью Git https://github.com/ummahusla/datjoke.com

Спасибо заранее

источник

2013-10-04 ummahusla

Дважды проверить наценку и сравнить его с начальной загрузки документации, но если честно У меня много проблем, таких как bootstrap 3.0. Кто-то будет трудно понять, как вам помочь, если вы не публикуете какой-либо исходный код или не объясняете, что вы пробовали и не смогли решить проблему. – Sualkcin

Я отправил весь код с веб-сайта. Я полностью исчерпал идеи, что это может быть, и что может быть решением. Я попытался это сделать, но все равно безуспешно. Я надеялся, что здесь у кого-то уже была эта проблема. – ummahusla

Edvin, вам нужно научиться использовать инструменты разработчика Safari в симуляторе iOS для отладки вашего css, чтобы понять, почему элемент не разработан так, как вы его ожидаете. Или возьмите источник и заново создайте его, упрощенно, в jsfiddle. –

Это невозможно, так как мобильный браузер просто слишком мал, чтобы поместиться этот заголовок. Вы должны помнить, что бутстрап реагирует и адаптируется к лучшему «представлению» для устройств на основе их размера экрана. У вас есть три варианта:

Удалите <meta name="viewport" content="width=device-width, initial-scale=1.0"> из head - это не может работать на некоторых телефонах, поскольку без этого тега они больше не вынуждены отображать мобильную версию.
Компиляция, не реагирующая версии начальной загрузки
Выполните следующие действия и имеет Navbar, как один на http://getbootstrap.com и следуйте следующим инструкциям:

Прежде всего, вам необходимо включить bootstrap.js для реагирующего Navbar.
Во-вторых, ваш Navbar должен быть в следующем формате:

<nav class="navbar navbar-default" role="navigation"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#"><!-- Your site name --></a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav"> 
     <!-- Nav elements --> 
    </ul> 
    </div><!-- /.navbar-collapse --> 
</nav>

Так что для вас, например, он должен быть:

<nav class="navbar navbar-default" role="navigation"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">DatJoke.com</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="index.html">Home</a></li> 
      <li><a href="about.html">About</a></li> 
      <li><a href="addjoke.html">Add joke</a></li> 
     </ul> 
     </div><!-- /.navbar-collapse --> 
    </nav>

источник

2013-10-05 00:25:27

Большое спасибо. Я пойду через него. – ummahusla

Twitter bootstrap 3.0 menu/header в мобильной версии

ответ

Смежные вопросы