ブートストラップ4メニューの位置決めが、私は、このテンプレート使用してい

Question

：

http://bootstrap4.guide/

を私が代わりに青ブートストラップ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タグでブートストラップ4 を交換しました：<img src='logo.png'/>。私はブートストラップにはまったく新しいものです。もし誰かがこれをどのように整理するかを理解する助けをすれば、それは素晴らしいものになるでしょう。

Answer 1

ロゴのイメージのために必要に応じて、私は小型デバイス用のブートストラップクラスを使用して2つの等しい部分でハンバーガーやロゴを分割することをお勧め..

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

Answer 2

をnavbar-brandクラスを調整します。（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>