Ruby On Rails 和 Bootstrap 左侧带有徽标的导航栏答案

【问题标题】：Navbar with logo to the left on Ruby On Rails and BootstrapRuby On Rails 和 Bootstrap 左侧带有徽标的导航栏
【发布时间】：2016-08-28 22:29:44
【问题描述】：

我需要在导航栏中插入一个徽标，但每次我尝试这样做时，导航栏都会向下延伸。如何将我的徽标放入导航栏中以避免这种情况？

代码如下：

<body>
<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to image_tag("image.png", alt: "logo"),
        '/' %>
    <%= link_to "...", '#', id: "prov" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "example1",   '#' %></li>
        <li><%= link_to "example2", '#' %></li>
      </ul>
    </nav>
  </div>
</header>
<div class="container">
  <%= yield %>
</div>

【问题讨论】：

标签： html css ruby-on-rails ruby twitter-bootstrap

【解决方案1】：

nav 是一个块级元素，这意味着它默认采用全宽，因此会在徽标下方下降。如果要将徽标与左侧对齐并在其旁边进行导航，则可以将徽标包装到 div 并为其提供类 col-sm-2 并将类添加到导航中为 col-sm-10。所以它应该是这样的

<body>
<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <div class="col-sm-2">
      <%= link_to image_tag("image.png", alt: "logo"),
        '/' %>
      <%= link_to "...", '#', id: "prov" %>
    </div>
    <nav class="col-sm-10">
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "example1",   '#' %></li>
        <li><%= link_to "example2", '#' %></li>
      </ul>
    </nav>
  </div>
</header>
<div class="container">
  <%= yield %>
</div>

See this reference on how bootstrap grid classes works

【讨论】：

【解决方案2】：

您需要将navbar-brand 类添加到您的链接中。

<body>
<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to image_tag("image.png", alt: "logo"), '/', class: 'navbar-brand' %>
    <%= link_to "...", '#', id: "prov", class: 'navbar-brand' %>

【讨论】：

【解决方案3】：

你可以为 NavBar 和 logo 大小写 css。例如，

.navbar-brand {
  padding: 0px;
}
.navbar-brand>img {
  height: 100%;
  padding: 15px;
  width: auto;
}

【讨论】：