Twitter的使​​用Rails引导按钮的问题（ERB） [英] Twitter bootstrap button problems with Rails (ERB)

问题描述

为什么会出现在我的Twitter引导按钮，以下两个codeS这么大的差别：

Why is there such a big difference in my twitter bootstrap button with the two following codes:

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

我想按钮是一样的第二个code按钮，一个与雇员再培训局是丑陋的。

I would like the button to be the same as the second code button, the one with ERB is ugly.

看来李类和NAV和UL与BTN类搞乱。我如何重写呢？

It seems the li class and and Nav and Ul is messing with the btn class. How do I override it?

下面是完整的code：

Here is the full code:

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

任何意见。

推荐答案

问题是导航栏＆LT; A＆GT; 标签都有自己的风格。你必须重载的 BTN BTN-成功与 .navbar .nav＆GT的风格;李＆GT; a.btn.btn-成功选择。事情是这样的： http://bootply.com/60811 越来越少应该做的工作（该bootply不完美的，你可以看到悬停事件不能正常工作，因为它应该）。

The problem is the navbar <a> tags has their own style. You have to override the style of the btn btn-success with a .navbar .nav > li > a.btn.btn-success selector. Something like this: http://bootply.com/60811 more and less should do the work (the bootply is not perfect, you can see that the hover event is not working as it should).

如果您使用类似的引导，萨斯，你可以实现覆盖简单：

If you use something like bootstrap-sass, you can achieve the override with simply:

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

这篇关于Twitter的使​​用Rails引导按钮的问题（ERB）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！