Question

我正在使用此模板：

我想稍微修改菜单，而不是使用蓝色 Bootstrap 4 文本，我想在那里有一个图像。在看到移动视图之前，它看起来很好。

我希望我的图片与文字在同一个地方：

然而，我的图像恰好出现在汉堡包菜单下：

这就是我现在所拥有的：

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

我刚用这个img标签替换了 Bootstrap 4 ：<img src='logo.png'/>。我是新手，如果有人帮我弄清楚如何解决这个问题，那就太好了。

Answer 1

我建议使用适用于小型设备的bootstrap类将汉堡包和徽标分成两部分。（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

根据徽标图片的需要调整$config['index_page'] = ''; //remove index.php from this line //whatever you set here it will be included to your base_url when you use site_url function.课程。

navbar-brand

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

Bootstrap 4菜单定位与图像

2 个答案: