Question

我正在使用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'

Answer 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添加到其中一个按钮中。

Answer 2

正在使用Bootstrap

将您的按钮包含在div = QList<AtomDyad> getUniqueAtomPairs(QVector<Atom> atomVector) {的div中（例如）。
将class = QList<AtomDyad> AtomDyadPairList; for (int iatom = 0; iatom < atomVector.size(); iatom++) { for (int jatom = 0; jatom < atomVector.size(); jatom++) { if (iatom == jatom) { continue; } float x1 = atomVector[jatom].getX(); float x2 = atomVector[iatom].getX(); float y1 = atomVector[jatom].getY(); float y2 = atomVector[iatom].getY(); float z1 = atomVector[jatom].getZ(); float z2 = atomVector[iatom].getZ(); float Radii_Sum1 = atomVector[jatom].getvdW_radius(atomVector[jatom]) + atomVector[iatom].getvdW_radius(atomVector[iatom]); if (DistanceBetween3DPoints(x1, x2, y1, y2, z1, z2) <= Radii_Sum1) { AtomDyad MyDyad(atomVector[iatom], atomVector[jatom]); // How can I ensure that MyDyad(atomVector[jatom], atomVector[iatom]) does not already exist? AtomDyadPairList.append(MyDyad); } } } return AtomDyadPairList;添加到按钮。

注意：无需使用额外的css

Answer 3

您当前的代码会在文本＆＃39; Back＆＃39;后面留出一个空格，它位于您的链接/按钮内，所以当然这对按钮本身之间的间距没有任何影响。

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

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

Answer 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

输入框后的空格

在两个按钮之间添加空间

5 个答案: