ruby-on-rails-3 - rails 3.2，twitter bootstrap 为什么带有图标的按钮宽度不正确？

Question

我正在尝试在按钮旁边添加一个图标，图标出现了，但是，位置不对，按钮总宽度也不对，请检查下面的图片，我试图设置红色按钮的宽度，但是，图标仍然出现在按钮文字上。

这是我用过的haml代码：

= link_to new_class_room_path, {:class=>'btn btn-primary'} do
  %i{:class=>'icon-plus'}
    %span
      New Class Room

%a{:class=>"btn btn-danger", :ref=>"#", :style=>'width: 200px;'}
  %i{:class=>"icon-trash icon-white"}
    Delete

任何人都可以告诉我我在这里缺少什么？ps：如果我不使用图标，按钮会以正确的宽度正常显示

Answer 1

您已将文本嵌套在图标中。

代替：

= link_to new_class_room_path, {:class=>'btn btn-primary'} do
  %i{:class=>'icon-plus'}
    %span
      New Class Room

%a{:class=>"btn btn-danger", :ref=>"#", :style=>'width: 200px;'}
  %i{:class=>"icon-trash icon-white"}
    Delete

利用：

= link_to new_class_room_path, {:class=>'btn btn-primary'} do
  %i{:class=>'icon-plus'}
  %span
    New Class Room

%a{:class=>"btn btn-danger", :ref=>"#", :style=>'width: 200px;'}
  %i{:class=>"icon-trash icon-white"}
  Delete