Css Rails的Twitter引导按钮问题（ERB）

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

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

及

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

这似乎是李类和导航和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>

---

任何建议。

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

你可以这样做：

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

---

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

你可以这样做：

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

问题是navbar越来越不应该做这项工作，因为bootply并不完美，您可以看到hover事件并没有像它应该做的那样工作

如果您使用引导式sass之类的工具，您只需执行以下操作即可实现覆盖：

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

问题是navbar越来越不应该做这项工作，因为bootply并不完美，您可以看到hover事件并没有像它应该做的那样工作

如果您使用引导式sass之类的工具，您只需执行以下操作即可实现覆盖：

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

---

对于使用Bootstrap 3的我来说，Przemek Mroczek提供的答案不起作用，因为链接仍然会创建一个标签，该标签的样式默认是从Bootstrap实现的

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

对我来说，有效的方法是发现填充物和线条高度是导致问题的原因。然后我创建了一个自定义类：

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

并将此自定义类用于我的链接到：

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

---

到目前为止，它工作得很好。

对于使用Bootstrap 3的我来说，Przemek Mroczek提供的答案不起作用，因为链接到仍然创建了一个标签，该标签的样式默认是从Bootstrap实现的

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

对我来说，有效的方法是发现填充物和线条高度是导致问题的原因。然后我创建了一个自定义类：

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

并将此自定义类用于我的链接到：

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

---

到目前为止，它运行得很好。

当然。。为什么按钮在有ruby ERB和没有ruby ERB的情况下看起来如此不同，这两种情况下都是相同的CSS类。我是一名程序员而不是设计师。我也不是设计师，但可能是因为在第一个示例中，您将类添加到链接，在第二个示例中添加到按钮。当然。。为什么按钮在有ruby ERB和没有ruby ERB的情况下看起来如此不同，这两种情况下都是相同的CSS类。我是一名程序员而不是设计师。我也不是设计师，但可能是因为在第一个示例中，您将类添加到链接，在第二个示例中添加到按钮。这里显示的是您的问题吗？是的，我的纽扣看起来一样。它必须是所有其他类，但我如何重写它。这里显示的是您的问题吗？是的，我的纽扣看起来一样。它必须是所有其他类，但我如何覆盖它。SASS部分没有任何效果，安装了SASS gem，在CSS文件末尾使用了scs，什么都没有。你有没有放@import bootstrap；一开始？是的，我在Begging创建了一个带有导入引导等的custom.css.scss。Rails忽略它。这是行不通的，您应该在每个需要引导的.scss文件中导入引导。无论如何，你不需要一直导入引导，你只需要导入你需要的东西。如果您正在覆盖按钮，只需导入引导/按钮；我有一个bootstrap和一个样式css文件，我将其转换为css.scss并粘贴在这两个文件中的代码中，然后放入导入bootstrap；在样式表中，但仍然没有。SASS部分没有任何效果，安装了SASS gem，在CSS文件的末尾使用了SCSS，什么都没有；一开始？是的，我在Begging创建了一个带有导入引导等的custom.css.scss。Rails忽略它。这是行不通的，您应该在每个需要引导的.scss文件中导入引导。无论如何，你不需要一直导入引导，你只需要导入你需要的东西。如果您正在覆盖按钮，只需导入引导/按钮；我有一个bootstrap和一个样式css文件，我将其转换为css.scss并粘贴在这两个文件中的代码中，然后放入导入bootstrap；在样式表中，但仍然没有。