Question

我希望菜单栏显示在同一行，以及网站标题和说明，菜单右对齐，其他所有内容保持对齐。 Here是网站。

<div class="hfeed site" id="page">

    <!-- ******************* The Navbar Area ******************* -->
    <div class="wrapper-fluid wrapper-navbar" id="wrapper-navbar">

        <a class="skip-link screen-reader-text sr-only" href="#content"><?php esc_html_e( 'Skip to content',
        'understrap' ); ?></a>

        <div class="row">
                <div class="col-sm-2">
                    <a href="#"><img class="logo" src="<?php echo get_template_directory_uri(); ?>/img/logo.png"></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <!-- Your site title as branding in the menu -->
                            <div class="parent">
                                <h1 class="title">
                                    <a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
                                </h1>
                                <span class="description"><?php printf( esc_html__( '%s', 'textdomain' ), get_bloginfo ( 'description' ) ); ?></span>

                            </div>
                </div>

                <!-- The WordPress Menu goes here -->
                <?php wp_nav_menu(
                    array(
                        'theme_location'  => 'primary',
                        'container_class' => 'collapse navbar-collapse',
                        'container_id'    => '',
                        'menu_class'      => 'navbar-nav navbar-right',
                        'fallback_cb'     => '',
                        'menu_id'         => '',
                        'walker'          => new WP_Bootstrap_Navwalker(),
                    )
                ); ?>
            <?php if ( 'container' == $container ) : ?>
            <?php endif; ?>

        </div><!-- .site-navigation -->

    </div><!-- .wrapper-navbar end -

- ＆GT;

Answer 1

我能够通过添加bootstrap类来实现它，

<div class="hfeed site" id="page">

    <!-- ******************* The Navbar Area ******************* -->
    <div class="wrapper-fluid wrapper-navbar" id="wrapper-navbar">

        <a class="skip-link screen-reader-text sr-only" href="#content"><?php esc_html_e( 'Skip to content',
        'understrap' ); ?></a>

        <div class="row">
                <div class="col-sm-2">
                    <a href="#"><img class="logo" src="<?php echo get_template_directory_uri(); ?>/img/logo.png"></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <!-- Your site title as branding in the menu -->
                            <div class="parent">
                                <h1 class="title">
                                    <a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
                                </h1>
                                <span class="description"><?php printf( esc_html__( '%s', 'textdomain' ), get_bloginfo ( 'description' ) ); ?></span>

                            </div>
                </div>

                <!-- The WordPress Menu goes here -->
                <?php wp_nav_menu(
                    array(
                        'theme_location'  => 'primary',
                        'container_class' => 'collapse navbar-collapse col-sm-9 pull-right',
                        'container_id'    => '',
                        'menu_class'      => 'navbar-nav navbar-right',
                        'fallback_cb'     => '',
                        'menu_id'         => '',
                        'walker'          => new WP_Bootstrap_Navwalker(),
                    )
                ); ?>

菜单栏不显示在同一行，也不显示网站标题和说明

1 个答案: