html - 无法让我的网站 Logo 与汉堡包图标出现在同一行

Question

我的网站是用 bootstrap 3 构建的。移动版本很好地崩溃了。它显示了我网站 Logo 的小版本，然后是第一行右上角的汉堡包图标。有些页面导致汉堡包向右偏移，所以我将其左对齐，因此它在 Logo 之后显得很窄。但这看起来很奇怪。所以我把汉堡移到了左边的 Angular 落。但是，现在 Logo 出现在下一行，看起来也很糟糕。我已经在代码中移动了图像并查看了 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-brand 元素之前的 .navbar-header 中，以保留自 .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>