css - Bootstrap 4 menu positioning with image

Question

I'm using this template:

http://bootstrap4.guide/

And I want to modify menu a bit, instead of having blue Bootstrap 4 text, I'd like to have a image there. It's looking all fine until I look at mobile view.

I'm expecting to have my image in the same place as the text:

However my image happens to appear under hamburger menu:

This is what I have at the moment:

<nav id='topNav' className='navbar navbar-default navbar-fixed-top'>
  <div className='container'>
    <button className='navbar-toggler hidden-md-up pull-right' type='button' data-toggle='collapse' data-target='#collapsingNavbar'>
      &#9776;
    </button>
    <a className='navbar-brand page-scroll' href='#first'><img src='logo.png'/></a>
    <div className='collapse navbar-toggleable-sm' id='collapsingNavbar'>
      <ul className='nav navbar-nav'>
        <li className='nav-item'>
          <a className='nav-link page-scroll' href='#one'>Cards</a>
        </li>
        <li className='nav-item'>
          <a className='nav-link page-scroll' href='#two'>Flexbox</a>
        </li>
        <li className='nav-item'>
          <a className='nav-link page-scroll' href='#three'>5 Tiers</a>
        </li>
        <li className='nav-item'>
          <a className='nav-link page-scroll' href='#four'>More</a>
        </li>
      </ul>
      <ul className='nav navbar-nav pull-xs-right'>
        <li className='nav-item'>
          <a className='nav-link page-scroll' data-toggle='modal' title='A free Bootstrap theme' href='#aboutModal'>About</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

I've just replaced Bootstrap 4 with this img tag: <img src='logo.png'/>. I'm quite new to bootstrap, if someone would help me to figure out how to sort this out, that'd be great.

Answer 1

我建议通过使用小型设备的引导类将汉堡包和徽标分成两个相等的部分。（col-xs-6）

<div class="col-xs-12">
    <div class="col-xs-6">
        <button className='navbar-toggler hidden-md-up' type='button' data-toggle='collapse' data-target='#collapsingNavbar'>
          &#9776;
        </button>
    </div>
    <div class="col-xs-6">
        <a className='navbar-brand page-scroll' href='#first'><img src='logo.png'/></a>
    </div>
</div>

Answer 2

navbar-brand根据需要为您的徽标图像调整类..

/* responsive nav */
@media(max-width:48em) {
    .navbar-default .navbar-nav>.nav-item {
        float: none;
        margin-left: .1rem;
    }
    .navbar-default .navbar-nav {
        float:none !important;
    }
    .navbar-default .navbar-brand {
        float:none;
    }
    .navbar-default .navbar-brand img {
        display:inline;
    }
}

http://codeply.com/go/7HJgyK6nxQ