我的网站是用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" -->
如果我正确理解你,你希望你的汉堡包位于.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>