Question

我的网站是使用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"  -->

Answer 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 个答案: