在两个按钮之间添加 space

Question

我正在使用 haml.erb 文件。我想在 UI 中的两个按钮之间添加 space。现在两个按钮一个接一个出现，没有space。我该怎么办？

 = link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
    %i.icon-arrow-left.icon-white
    Back &nbsp; // does not workout
  =link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success'

Answer 1

您可以在第二个按钮上添加剩余边距。您可以在第二个按钮上添加 class，例如

 =link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success left-margin'

然后你可以在你的 haml 文件中添加 css

:css
  .left-margin { margin-left: 2px }

或者您可以将内联 css 添加到这些按钮之一。

Answer 2

您当前的代码在 link/button 内的文本 'Back' 后面放置了一个 space，因此这当然不会对按钮本身之间的间距产生任何影响.

自从使用 haml 以来已经有一段时间了，但大致如下：

= link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
  %i.icon-arrow-left.icon-white
  Back
&nbsp;
= link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success'

应该适用于您的情况。

但是，为什么要将布局/样式完全留给模板呢？使用 CSS 来组织布局，在 .btn class 元素的右侧放置边距，或者添加新的自定义按钮 class 并添加边距以限制受影响的按钮范围如果您不想在所有按钮上设置全局边距。

Answer 3

尝试：

 = link_to :back, :class => "btn btn-success", :href => '/pt_setup' do
    %i.icon-arrow-left.icon-white
    Back &nbsp; // does not workout
  =link_to "New Subscription", { :controller => "pt_app", :action => "new_subn"}, :class => 'btn btn-success', :style => 'margin-left:10px;'

Answer 4

因为您正在使用 Bootstrap

用 class='col-xs-3' 将按钮包裹在 div 中（例如）。
将 class="btn-block" 添加到您的按钮。

注意：不需要额外使用css不需要

Answer 5

如果您不想为间距添加 css。您可以在 space 之前的括号末尾添加“>”，在 space 之后的括号末尾添加“<”。

示例：

%form
  %input{name: "search", placeholder: "Text Here", type: "text"}
  %button{type: "submit"}>
    %i.fa.fa-search

将space按钮放在前面，将其与输入文本框分开

或等价地：

%form
  %input{name: "search", placeholder: "Text Here", type: "text"}<
  %button{type: "submit"}
    %i.fa.fa-search

将space后的输入框

在两个按钮之间添加 space

Adding space between two buttons

css

ruby-on-rails

haml