导航栏和徽标的 Bootstrap 和 Wordpress 位置答案

【问题标题】：Bootstrap and Wordpress position of navbar and logo导航栏和徽标的 Bootstrap 和 Wordpress 位置
【发布时间】：2018-04-24 20:40:38
【问题描述】：

所以我尝试将电话号码添加到我网站上的正确位置，但它的样式不正确。我遇到的问题是移动显示。徽标不会居中，并且电话号码不会显示在导航栏中。

我想要达到的目标：

desktop mobile

我有什么：

http://lakeozarkelectrician.com/

CSS：

// -------------- Mobile -------------- //

@media screen and (max-width: 480px) {
.navbar-brand {
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}
.img-fluid {
    display: block;
    margin: 0 auto;
}
a[href^="tel:"] {
    color: white;
    text-decoration: none;
    float: none;
}
}

// ------------- Telephone Styling ------------ //

#telephone {
text-align: center;
margin-top: 15px;
font-size: large;
float: right;
}

a[href^="tel:"] {
  color: black;
  text-decoration: none;
  display: inline;
}

标题：

<body <?php body_class(); ?>>

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

<!-- ******* Header ******* -->
<header>
    <div class="wrapper-fluid">

<!-- Your site title as branding in the menu -->
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <?php if ( ! has_custom_logo() ) { ?>

                    <?php if ( is_front_page() && is_home() ) : ?>

                        <h1 class="navbar-brand mb-0"><a rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>

                    <?php else : ?>

                        <a class="navbar-brand" rel="home" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>

                    <?php endif; ?>


                <?php } else {
                    the_custom_logo();
                } ?>
            </div>
<!-- end custom logo -->
            <div class="col-md-6 d-block hidden-md">
                <div id="telephone">
                <p>Call Now<br>
                    <i class="fa fa-phone"></i>
                <a href="tel:636-244-9045">636-244-9045</a></p>
            </div>
        </div>
    </div>
</div>
<!-- ******************* 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>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark">

    <?php if ( 'container' == $container ) : ?>
        <div class="container">
    <?php endif; ?>

            <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>

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

        <span class="navbar-text d-inline-block d-sm-none">
        <i class="fa fa-phone"></i>
                <a href="tel:636-244-9045">636-244-9045</a>
        </span>

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

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

【问题讨论】：

标签： html css wordpress twitter-bootstrap

【解决方案1】：

很抱歉，因为我知道它很旧但可能有用你可以像下面这样虚假容器并添加你想要的任何东西

<div id="navbarNavDropdown" class="collapse navbar-collapse"><?php wp_nav_menu(
            array(
                'theme_location'  => 'primary',
                'container'    => false,
                'menu_class'      => 'navbar-nav',
                'fallback_cb'     => '',
                'menu_id'         => 'main-menu',
                'walker'          => new WP_Bootstrap_Navwalker(),
            )
        ); ?><span class="nav-item">MY NEW ITEM</span></div>

【讨论】：

【解决方案2】：

你可以试试这个：

@media screen and (max-width: 480px) {
.navbar-brand {
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;

    margin-left: auto;   // <-- add this
    margin-right: auto;  // <-- add this
    display: table;      // <-- add this

}

#telephone{display:none;}    // <-- add this

.navbar > .container + span{ // <-- add this
    position: absolute;      // <-- add this
    right: 15px;             // <-- add this
    top: 10px;               // <-- add this
}                            // <-- add this

}

【讨论】：