Question

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

以下是代码：

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

Answer 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

Answer 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' %>

Answer 3

您可以为NavBar和徽标大小编写css。例如，

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

在Ruby On Rails和Bootstrap上左侧带有徽标的Navbar

3 个答案: