Rails (ERB) 的 Twitter 引导按钮问题答案

【问题标题】：Twitter bootstrap button problems with Rails (ERB)Rails (ERB) 的 Twitter 引导按钮问题
【发布时间】：2013-05-06 19:36:17
【问题描述】：

为什么我的 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>

任何建议。

【问题讨论】：

您的问题是这里显示的内容吗？ bootply.com/60811
是的，我的按钮看起来一样。它必须是所有其他类，但是我如何覆盖它。

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

【解决方案1】：

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

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

.navbar .nav > li > a.btn.btn-success {
    @extend .btn;
    @extend .btn-success;
}

【讨论】：

SASS 部分没有任何效果，安装了 SASS gem，在 CSS 文件末尾使用了 SCSS，什么也没有。
你把@import bootstrap;放在开头了吗？
是的，我在开始时创建了一个带有 import bootstrap 等的 custom.css.scss。 Rails 忽略它。
那不行，你应该在每个需要引导的.scss文件中导入引导。无论如何，你不需要一直导入bootstrap，你可以只导入你需要的。如果您要覆盖按钮，只需执行import "bootstrap/buttons";
我有一个引导程序和一个样式 css 文件，我将其转换为 css.scss 并粘贴到两者的代码中并放入 import "bootstrap";在样式表中，但仍然没有。

【解决方案2】：

对于使用 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" %>

目前运行良好。

【讨论】：

【解决方案3】：

在第二个示例中，您没有使用。如果您想在 Rails 助手上使用 ruby，则需要嵌入 ruby。

你可以这样做：

<%= link_to "Some name", your_path do %>
  html-code-here
<% end %>

【讨论】：

当然.. 为什么按钮在有和没有 ruby (ERB) 的情况下看起来如此不同，在两种情况下它的 CSS - 类都是相同的。我是程序员而不是设计师。
我也不是设计师，但可能是因为在第一个示例中，您将类添加到链接，而在第二个示例中添加到按钮。