Twitter upload issues using Rails (ERB)

Question

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

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

and

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

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

It seems that the class li and Nav and Ul were messing around with the class btn. How to override it?

Here is the complete 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> 

Any advice.

Answer 1

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

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

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

Answer 2

For me working with Bootstrap 3, the answer provided by Przemek Mroczek did not work, because link_to still creates the <a> tag, which is set by default from Bootstrap by default.

Pigueiras answer put me on the right track, but caused other elements of unintended effects (input focus mode also got the style that I set for .navbar .nav > li > a.btn.btn-success

What worked for me was to find that the problem with padding and line height <a> caused the problem. Then I created a custom class:

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

and used this custom class for my link_to:

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

Works well so far.

Answer 3

In the second example, you are not using <% =%>. A built-in ruby ​​is needed if you want to use ruby ​​for rail assistants.

You can do something like this:

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