Javascript Rails链接更改为按钮，并使用bootstrap btl类设置样式

嗨，我正在尝试在我的一个视图中使用bootstrap中的“button_to”样式来显示一个包含3个链接的动作，如下所示

<%= 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" %>

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

部分观点如下:

<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 %>

文章发布日期：

文章标题：

文章内容片段：

---

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

Q1：不知道按钮的css。尝试将

display:inline

添加到按钮的css中

问题2：将

remote:true

添加到按钮/链接渲染行如何。Rails js使用提供的http方法和元素上的url（您必须添加）将ajax事件添加到使用它的

link_to

和

button_to

元素中

因此，您的代码应该如下所示：

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

---

请注意，使用单击事件提交ajax请求并不是最佳做法，也不需要使用rails。最好发布视图的其余部分，但此解决方案可以将按钮显示在同一行上。你真的应该在另一个问题中问Q1

最佳定制参考

<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\u标记

view助手来包装这些按钮，而不是使用

标记。

//whatever.css

.btn{
      float:left;
  }

在这个代码后面放一个div：

首先，我使用引导中的类：“btn btn primary”样式。我从link_改为button_的原因是，单击按钮后，按钮上的文本变灰，如“已访问链接”中所示。这就是整个变革过程的开始。因为我正在用类“btn”设置这些链接的样式，所以我不希望它们的文本再被视为链接。其次，没有发布文章的路径，只是在JS函数中发生了一个更新调用。你能描述一种合适的方式吗？我只想从文章的“显示”视图中更新一个状态标志，并在页面上自动刷新。如果你的问题是访问的链接，他们会问你这个问题。使用css伪类

：visted

来设置它们的样式。我所描述的方法是一种合适的rails方法。控制器操作应该只更新状态标志。返回一个错误代码或成功代码，从中，您可以决定如何处理js中的页面。@DickieBoy，谢谢您的回复。在再次尝试您的更改后，我将更新我的答案。@对于问题的混淆，我深表歉意。我从另一个线程中得到了答案，因此使用class=“row”将按钮移动到标记中不会改变位置。更重要的是，使用

col md-

类将它们在相等的垂直位置对齐。更重要的是，使用

col md-

类将它们在相等的垂直位置对齐。

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

.btn{
      float:left;
  }