1

次の 2 つのコードで、私の 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>

ボタンを2番目のコードボタンと同じにしたいのですが、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

1

Bootstrap 3 を使用している私にとって、Przemek Mroczek によって提供された回答は機能しませんでした。これは、Bootstrap からデフォルトで実装されたスタイリングを持つタグをlink_toまだ作成しているためです。<a>

ピゲイラスの答えは私を正しい軌道に乗せましたが、他の要素に意図しない影響を与えました(入力のフォーカスモードも私が設定したスタイリングを取得していました).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

2 番目の例では、<%= %> を使用していません。Rails ヘルパーで Ruby を使用する場合は、組み込みの Ruby が必要です。

次のようなことができます。

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