navbardaki logo öğesinin yanı sıra bir span stilini nasıl kodlarsınız

Question

Başka bir web sitesinde gördüğüm başlık için bir stil stilini kopyalamaya çalışmaktan sıkıntı duyuyorum; böylece logo, daha küçük bir metin aralığına bitişik olarak oturur logo ve span metnini ayıran boru.

Böyle nasıl elde edebilirim. Bunu kendi kodumda denediğimde, metin metin estetik olarak meydan okunan logoyu aşar.

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

, inline-block kullanmak

@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

A blok düzeyinde öğe her zaman yeni bir satıra başlar .navbar-brand > img

varsayılan önyükleme stilleri değiştirmeniz gerekir.

Buraya bakın: https://jsfiddle.net/1zfzd55m/

Answer 2

bazı DEMO sağlar, ancak bu çalışacağım eğer daha iyi olurdu:

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