html - 除了导航栏中的 Logo 元素之外，您如何使用 span 样式进行编码

Question

我很难尝试复制我在另一个网站上看到的标题样式，其中 Logo 位于较小文本范围的旁边，管道将 Logo 和跨度文本分开。

我怎样才能做到这一点。当我在自己的代码上尝试此操作时，跨度文本位于 Logo 下方，看起来很不美观。

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 的默认引导样式

block 级元素总是在新行开始，使用inline-block。

看这里: https://jsfiddle.net/1zfzd55m/