どのようにして、navbarのロゴ要素のほかにスパンスタイルでコードするのですか

Question

私は別のウェブサイトで見たヘッダーのスタイリングをコピーするのが難しいです。ロゴとスパンのテキストを区切るパイプ。

どうすれば実現できますか？これを自分のコードで試してみると、スパンのテキストは、審美的に挑戦しているロゴの下に座っています。

header.html.erb

<nav class="navbar navbar-static-top navbar-default" role="navigation"> 
    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="/"> 
     <img alt="Nippon Beauty" class="navbar-brand-icon" src="assets/nippon.svg"> 
     <span style="color: #e94b48">| Japanese and South Korean Luxury Skincare</span> 
    </a> 

    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><%= link_to "Home", root_path %></li> 
     <li><%= link_to "About", about_path %></li> 
     <li><%= link_to "Login", new_user_session_path %></li> 
     <li><%= link_to "Signup", new_user_registration_path %></li> 
     <% if user_signed_in? %> 
     <li><%= link_to "Account Settings", edit_user_registration_path %></li> 
     <li><%= link_to "Log out", destroy_user_session_path, method: :delete %></li> 
     <% else %> 
    <% end %> 
    </ul> 
    </div><!-- /.navbar-collapse --> 
</nav> 

Bootstrap_and_customization.css.scss

@import url(https://fonts.googleapis.com/css?family=Lato:400,700); 

$body-bg:       #ecf0f1; 
$font-family-sans-serif:   'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
$navbar-height:     70px; 
$navbar-default-bg:    white; 
$navbar-default-brand-color:  #c0392b; 
$brand-primary:     #c0392b; 
$jumbotron-bg:      white; 

@import 'bootstrap'; 
@import 'bootstrap-sprockets'; 

.center { 
    text-align: center; 
} 

.navbar-brand { 
    font-weight: bold; 
} 


.btn-lg { 
    padding: 18px 28px; 
    font-size: 22px; 
    border-radius: 8px; 
    } 


.jumbotron { 
    width: 735px; 
    padding-left: 30px; 
    padding-right: 15px; 
    padding-bottom: 20px; 
    padding-top: 20px; 
} 

.navbar { 
    min-height: 90px; 
} 

.container { 
    width: 1270px; 
} 



.navbar-brand { 
    float: left; 
    padding: 10px 15px; 
} 

Answer 1

あなたは.navbar-brand > img

ブロックレベル要素は常にinline-blockを使用し、新しい行に開始し、デフォルトのブートストラップのスタイルを変更する必要があります。

はこちらをご覧ください： https://jsfiddle.net/1zfzd55m/

Answer 2

あなたには、いくつかのDEMOを提供しますが、これは試してみます場合、それは良いだろう：

.navbar-brand img { 
    display:inline-block; 
} 
.navbar-brand span { 
    display:inline-block; 
} 
.navbar-brand { 
    padding: 10px 15px   
    float: left; // or delete float left or add following css: 
    width: 500px // set some width to your parent div that will fit img and span widths 
}