1

为什么我的 twitter 引导按钮与以下两个代码有如此大的差异：

  <li><%= link_to 'Post A Ride', home_path, :class => "btn btn-success" %></li>

和

  <li> link_to '<button class="btn btn-success"> Post A Ride </button>'</li>

我希望按钮与第二个代码按钮相同，带有 ERB 的按钮很难看。

似乎 li 类和 Nav 和 Ul 正在搞乱 btn 类。我如何覆盖它？

这是完整的代码：

 <header class="navbar">
 <div class="navbar-inner">
 <div class="container"> 

  <%= link_to "ALift", '#', id: "logo" %>
  <nav>
    <ul class="nav pull-right">
      <li><%= link_to 'Post A Ride', home_path, :class => "btn btn-success" %></li>
      <li><%= link_to "Search",  '#' %></li>
      <li><%= link_to "Help",    '#' %></li>
      <li><%= link_to "Sign in", '#' %></li>
    </ul>
  </nav>
   </div>
  </div>
 </header>

任何建议。

4

3 回答 3

3

问题是导航栏<a>标签有自己的风格。btn btn-success您必须使用选择器覆盖的样式.navbar .nav > li > a.btn.btn-success。像这样的东西：http : //bootply.com/60811 应该做的工作越来越少（bootply 并不完美，你可以看到悬停事件没有正常工作）。

如果你使用 bootstrap-sass 之类的东西，你可以简单地实现覆盖：

.navbar .nav > li > a.btn.btn-success {
    @extend .btn;
    @extend .btn-success;
}
于 2013-05-06T20:19:58.260 回答
1

对于使用 Bootstrap 3 的我来说，Przemek Mroczek 提供的答案不起作用，因为它link_to仍然创建了一个<a>标签，该标签具有默认从 Bootstrap 实现的样式。

Pigueiras 的回答让我走上了正确的轨道，但导致其他元素产生了意想不到的效果（输入的焦点模式也得到了我设置的样式.navbar .nav > li > a.btn.btn-success

对我有用的是发现填充和行高<a>是导致问题的原因。然后我创建了一个自定义类：

.custom-navbar-buttons
{
  @extend .btn;
  @extend .btn-default;
  @extend .navbar-btn;
  padding: 6px 12px !important;
  line-height: 1.428571429 !important;
}

并将这个自定义类用于我的 link_to：

<%= link_to "Home", home_path, :class=> "custom-navbar-buttons" %>

到目前为止它运作良好。

于 2014-01-14T22:58:06.663 回答
0

在第二个示例中，您没有使用 <%= %>。如果您想在 rails 助手上使用 ruby​​，则需要嵌入式 ruby​​。

你可以这样做：

<%= link_to "Some name", your_path do %>
  html-code-here
<% end %>
于 2013-05-06T19:41:05.483 回答