css - 调整大小时 Bootstrap Wordpress 菜单中的中心 Logo

Question

因此，默认情况下，Bootstrap 在左 Angular 显示 Logo ，但在调整大小时它仍然在左侧。我想把它放在中间，让它更好地显示。

我所拥有的图像: What i have

我想要显示的图像: What i want

我有这段代码可以在 Wordpress 中显示 Bootstrap 菜单:

<header>
  <div class="menu">
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container" id="menu2">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>">
              <img alt="Logo" src="<?php bloginfo('template_url');?>/img/logo.png">
            </a>
          </div>
          <div class="navbar-collapse collapse col-md-9" id="menu1">
            <?php wp_nav_menu(array(
                'theme_location' => 'primary',
                'container' => false,
                'menu_class' => 'nav navbar-nav navbar-right'));
              ?>

          </div>

        </nav>
      </div>
</header>

我试过text-align:center，但它只适用于链接，不适用于logo

Answer 1

您可以为您的 header 重写不同的布局，并在中心使用 Logo ，并使用 Bootstrap 帮助程序类使适当的 header 可见。供你引用。 http://getbootstrap.com/css/#responsive-utilities

另一种方法是使用偏移量 http://getbootstrap.com/css/#grid-offsetting