Используя последнюю версию Bootstrap, я хочу заменить текст области брендинга логотипом. На моем рабочем столе он выглядит идеально, на моем iPhone логотип появляется под небольшим меню сворачивания, тогда как он должен быть рядом с ним (слева от него). Если я уменьшу логотип, он отлично работает на iPhone, но маленький логотип слишком мал для настольного сайта. Я думал, что, добавив класс img-responsive к логотипу, он соответственно уменьшится, но это не помогло. Если вы хотите воспроизвести это, логотип имеет ширину 276 пикселей и высоту 40 пикселей.
Все выглядит нормально на iPhone в горизонтальной ориентации (это серьезная проблема при просмотре в вертикальном положении, что, естественно, является тем, как большинство людей держат свой телефон).
Вот соответствующий код (вы увидите внизу кнопку покупки, она автоматически скрывается на iPhone, чего достаточно для логотипа, если нет другого варианта). Имейте в виду, что окончательным решением было бы уменьшить размер логотипа в зависимости от размера экрана.
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img class="img-responsive" src="img/logo.png" alt=""></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Application <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="features.php">Features</a></li>
<li><a href="screenshots.php">Screenshots</a></li>
<li><a href="demos.php">Demos</a></li>
<li class="divider"></li>
<li><a href="purchase.php">Purchase</a></li>
<li><a href="licensing.php">Licensing Model</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Documentation <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="documentation.php#tab1">Version Info</a></li>
<li><a href="documentation.php#tab2">System Requirements</a></li>
<li class="divider"></li>
<li><a href="documentation.php#tab3">Installation Guide</a></li>
<li><a href="documentation.php#tab4">Integration Guide</a></li>
<li><a href="documentation.php#tab5">Frontdesk Manual</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Support <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/support/knowledgebase.php">Knowledgebase</a></li>
<li><a href="/support/index.php?a=add">Submit Ticket</a></li>
<li><a href="/support/ticket.php">View Ticket Status</a></li>
<li class="divider"></li>
<li><a href="services.php#tab1">Installation Service</a></li>
<li><a href="services.php#tab2">Development Services</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="faq.php">Presales Questions</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Legal <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="legal.php#tab1">Privacy Policy</a></li>
<li><a href="legal.php#tab2">Terms of Use</a></li>
<li><a href="legal.php#tab3">Site Security</a></li>
<li class="divider"></li>
<li><a href="legal.php#tab4">Money Back Guarantee</a></li>
</ul>
</li>
</ul>
<a href="purchase.php"><button type="button" class="btn btn-success" style="margin-top: 8px; margin-left: 30px;">Purchase</button></a>
</div>
<!--/.nav-collapse -->
