在两个按钮之间添加空格答案

【问题标题】：Adding space between two buttons在两个按钮之间添加空格
【发布时间】：2017-07-26 09:09:45
【问题描述】：

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

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

【问题讨论】：

标签： css ruby-on-rails haml

【解决方案1】：

您可以在第二个按钮上添加左边距。您可以在第二个按钮上添加类，例如

 =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 添加到这些按钮之一。

【讨论】：

【解决方案2】：

当你使用 Bootstrap 时

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

注意：不需要使用多余的css

【讨论】：

【解决方案3】：

您当前的代码在链接/按钮内部的文本“返回”后面放置了一个空格，因此这当然不会对按钮本身之间的间距产生任何影响。

使用 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 类元素的右侧放置一个边距，或者添加一个新的自定义按钮类并添加边距以限制受影响按钮的范围，如果你不希望所有的全局边距设置按钮。

【讨论】：

谢谢你@john hayes
@Jefferson 没问题，我看到您正在使用引导程序，如果您使用的是引导程序 4，则可以使用已经提供的 .ml-1 或 .mr-1 类为元素添加边距，而无需必须自己编写任何 CSS。
再次感谢你@john hayes –
@Jefferson ：您可以在链接中添加btn-block 类

【解决方案4】：

试试：

 = 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;'

【讨论】：

@Jefferson，我为第二个按钮添加了边距。
@jefferson link_to 上有内联 css
@Sajin - 谢谢你的兄弟

【解决方案5】：

如果您不想为间距添加 CSS。您可以在括号末尾添加“>”作为之前的空格，“

例子：

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

按钮前的空格，将其与输入文本框隔开

或等价：

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

输入框后面会加空格

【讨论】：