#html #css #twitter-bootstrap #hamburger-menu
#HTML #css #twitter-bootstrap #гамбургер-меню
Вопрос:
Мой сайт создан с помощью bootstrap 3. Мобильная версия красиво свернулась. Он отобразил уменьшенную версию логотипа моего сайта, а затем значок гамбургера в правом углу на первой строке. Из-за некоторых страниц гамбургер был смещен вправо, поэтому я выровнял его по левому краю, чтобы он отображался прямо после логотипа. Но это выглядит странно. Поэтому я переместил гамбургер в левый угол. Но теперь логотип появляется в следующей строке, которая также выглядит неопрятно. Я переместил изображение в коде и взглянул на css (что для меня является большим слабым местом), но я просто не могу его взломать. Итак, я ищу идеи, пожалуйста.
<div class="container" id="main">
<div class="navbar navbar-custom navbar-fixed-top" role = "navigation">
<div class="container" id="reduce_padding">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <!-- Recommended to allow use of screen readers -->
<span class="icon-bar"></span> <!-- These three lines create the bars in the drop down box in the top right corner that appears when the screen is shrunk for use of mobile phones -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div> <!-- End div navbar-header -->
<!-- NAVBAR LINKS -->
<div class="navbar-collapse collapse navbar-inner">
<ul class="nav navbar-nav nav-center">
<li><a href="../index.php">Home</a></li>
<li><a href="../bs3/programme.html">Programme</a></li>
<li><a href="../bs3/galleries/member_galleries.php">Galleries</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Competitions <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="../bs3/competitions/current/comp_bill_jenkins_shield.php">Bill Jenkins Shield</a></li>
<li><a href="../bs3/competitions/current/comp_colour_print.php">Colour Print</a></li>
<li><a href="../bs3/competitions/current/comp_creative_digital.php">Creative Digital</a></li>
<li><a href="../bs3/competitions/current/comp_digital_portfolio.php">Digital Portfolio</a></li>
<li><a href="../bs3/competitions/current/comp_monochrome_print.php">Monochrome Print</a></li>
<li><a href="../bs3/competitions/current/comp_panorama_and_letterbox.php">Panorama and Letterbox</a></li>
<li><a href="../bs3/competitions/current/comp_print_challenge.php">Print Challenge</a></li>
</ul>
</li>
<!-- end of dropdown-menu - competitions -->
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us <b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="../bs3/about_us/more_on_the_club.html">More on the Club</a></li>
<li> <a href="../bs3/about_us/contact_us.php">Contact Us</a></li>
<li> <a href="../bs3/about_us/where_we_meet.html">Where We Meet</a></li>
</ul>
</li>
<!-- end of dropdown-menu - about us -->
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Members <b class="caret"></b></a>
<ul class="dropdown-menu">
<li> <a href="../bs3/members/rules_submissions.html">Submission Info</a></li>
<li> <a href="../bs3/members/rules_categories.html">Categories Info</a></li>
<li> <a href="../bs3/members/comp_hand_in_dates.html">Comp. Hand in Dates</a></li>
<li><a href="../bs3/members/comp_judges.html">Competition Judges</a></li>
<li><a href="../bs3/members/photographer_of_the_year.html">Photographer of the Year</a></li>
<li><a href="../bs3/members/roll_of_honour.html">Roll of Honour</a></li>
</ul>
</li>
<!-- end of dropdown-menu - members -->
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Resources <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="../bs3/resources/goshoot.html">Upcoming Shooting Events</a></li>
<li><a href="../bs3/resources/links.html">Useful Links</a></li>
<li><a href="../bs3/resources/how_to_photo_edit.html">Introduction to Photo Editing</a></li>
<li><a href="../bs3/resources/historical_documents.html">Club Archive</a></li>
</ul>
</li>
<!-- end of dropdown-menu - resources -->
</ul>
</div> <!-- End div class="container" id="reduce_padding" -->
<!-- Show the small logo only on mobile devices -->
<a class="navbar-brand visible-xs" href="#"><img src="../bs3/images/gifs/logo_small.gif" alt="Logo"></a>
</div> <!-- End div class="navbar navbar-custom navbar-fixed-top" -->
</div> <!-- End div class="container" id="main" --> 
Комментарии:
1. я думаю, для нас будет лучше, если вы предоставите нам скриншот
2. В вашем <div class=»navbar-свернуть свернуть navbar-inner» > добавьте значение с плавающей точкой: слева
Ответ №1:
Если я вас правильно понял, вы хотели бы, чтобы ваш гамбургер располагался слева от .navbar-brand и в остальном был таким, как по умолчанию, я думаю, что это должно вам помочь.
<style type="text/css">
.navbar-toggle {
float: left;
margin-right: 0;
margin-left: 15px;
}
</style>
float: left Переопределяет значение по умолчанию float: right . margin-right: 0 и margin-left: 15px переместите 15 пикселей поля в правую часть кнопки вместо левой, где оно находится по умолчанию.
Убедитесь, что ваш значок гамбургера помещен в элемент .navbar-header перед .navbar-brand , чтобы сохранить желаемый порядок, который вы хотите, поскольку .navbar-brand также перемещен влево.
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <!-- Recommended to allow use of screen readers -->
<span class="icon-bar"></span> <!-- These three lines create the bars in the drop down box in the top right corner that appears when the screen is shrunk for use of mobile phones -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="#"><img src="../bs3/images/gifs/logo_small.gif" alt="Logo"></a>
</div>
Комментарии:
1. Спасибо, что сработало. Я уже внес предложенные изменения стиля. Я установил ‘margin-left: 30px;’ и ‘float: left;’ в bootstrap.css. Но что также было необходимо, так это предложение Jacinator переместить ‘ <a class=»navbar-brand visible-xs» href=»#»> ‘чуть ниже ‘</button>, чтобы он все еще находился в пределах ‘<div class=»navbar-header»>’. В моем исходном коде это было полностью под ‘<div class=»container» id =»reduce_padding»>’