Question

您好我正在尝试在我的一个视图中使用bootstrap中的“button_to”样式进行show动作，其中有3个link_to动作，如下所示。

<%= link_to "Edit Article", edit_article_path(@article), class: "btn btn-default" %>  
<%= link_to "Publish Article", '', id: "publish_button", class: "btn btn-primary" %>  
<%= link_to "Close Article", '', id: "close_button", class: "btn btn-danger" %>

这些链接显示为彼此相邻的一行按钮。

但是当我将来电link_to更改为button_to时，如下所示，所有三个按钮都显示在不同的行上，下面给出了新的代码...

<%= button_to "Edit Article", edit_article_path(@article), method: :get, class:"btn btn-default" %>  
<%= button_to "Publish Article", '', id: "publish_button", class: "btn btn-primary" %>  
<%= button_to "Close Article", '', id: "close_button", class: "btn btn-danger" %>

所以问题是如何在同一行（或行）上显示以下更改的按钮？

部分视图如下，

<p>
<b>Article Posting date</b>: <%= @article.updated_at %><br />
<b>Article Title</b>: <%= @article.title %><br />
<b>Article content snippet</b>: <%= @article.content %>
</p>

<% if signed_in? %>   
  <%= button_to "Edit Article", edit_article_path(@article), method: :get, class:"btn btn-default" %>  
  <%= button_to "Publish Article", '', id: "publish_button", class: "btn btn-primary" %>  
  <%= button_to "Close Article", '', id: "close_button", class: "btn btn-danger" %>
<% end %>

根据要求从帖子中删除了问题的第二部分。

Answer 1

Q1：不知道按钮的CSS。尝试将display:inline添加到按钮的css中。

Q2：如何将remote: true添加到按钮/链接渲染线。 Rails js将ajax事件添加到使用它的link_to和button_to元素，使用提供的http方法和元素上的url（您必须添加）。

因此，您的代码应该类似于：

<%= button_to "Publish Article", publish_article_path(@article), id: "publish_button", class: "btn btn-primary", remote: true %>

您可以使用以下方式挂钩ajax事件：

$("#publish_button").on("ajax:success", function(e){
   //blah
});

All remote events here

请注意，使用点击事件提交ajax请求并不是最佳做法，也不需要使用rails。

Answer 2

最好发布视图的其余部分，但此解决方案可能会在同一行显示您的按钮。你应该在另一个SO问题中问问Q1。

参考Bootstrap's Grid documentation以获得最佳自定义。

<div> <!-- adding a class="row" might be even better for your alignment -->
  <div class="col-md-6">
    <%= link_to "Publish Article", '', id: "publish_button", class: "btn btn-primary" %>  
  </div>
  <div class="col-md-6">
    <%= link_to "Close Article", '', id: "close_button", class: "btn btn-danger" %> 
  </div>
</div>

6的实验。列应该加起来不超过12。使用col-md-offset-2偏移两列，这样您就可以缩小按钮范围，但填写未使用的列。

您还可以使用content_tag视图帮助程序来包装这些按钮，而不是使用<div>标记。

Answer 3

// whatever.css

.btn{
      float:left;
  }

在此代码之后加上div：

<%= button_to "Edit Article", edit_article_path(@article), method: :get, class:"btn btn-default" %>  
<%= button_to "Publish Article", '', id: "publish_button", class: "btn btn-primary" %>  
<%= button_to "Close Article", '', id: "close_button", class: "btn btn-danger" %>
<div style="clear:both">
</div>

Rails link_to更改为button_to并使用bootstrap btl类进行样式设置

3 个答案: