使用Phoenix的删除方法引导样式

Question

我的引导程序导航栏中显示了各种链接，例如登录，注册，访问页面和注销。当我在链接助手中使用delete方法时，我丢失了我的默认引导程序CSS。例如，以下链接助手：

<li><%= link "Register", to: user_path(@conn, :new) %></li>

生成以下html：

<li><a href="/users/new">Register</a></li>

但是，如果我想要删除方法，例如注销时：

<li><%= link "Log out", to: session_path(@conn, :delete, @current_user), method: "delete" %></li>

它会生成一个表单，如：

<li><form action="/sessions/3" class="link" method="post">
  <input name="_method" type="hidden" value="delete">
  <input name="_csrf_token" type="hidden" value="QA1vDhw/PhoBcgIwCgJJVCQPJQ4FAAAA/U8oImxsGBgDOF+crLSodA==">
  <a data-submit="parent" href="#" rel="nofollow">Log out</a>
</form></li>

现在我的锚标记在一个表单中，我已经丢失了我的默认CSS。

我使用自定义类修复了它：

.bad-bootstrap-link {
  position: relative;
  display: block;
  padding: 10px 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  color: #777;
}

这是唯一的方法吗？我错过了什么吗？这非常不方便，我必须为删除链接重新定义CSS样式。

Answer 1

我遇到了完全相同的问题，我添加了一个bootstrap css类<li><%= link gettext("logout"), to: session_path(@conn, :delete, @current_user), method: "delete", class: "navbar-text" %></li> ，如下面的Bootstrap 3所示。这对我来说非常接近。

nav-item nav-link

对于Bootstrap 4，我使用类<li><%= link gettext("logout"), to: session_path(@conn, :delete, @current_user), method: "delete", class: "nav-item nav-link" %></li> ：

// this is existing lines
{ VERXXX to SYN_COMPILERX, SYN_DELPHIX and SYN_CPPBX mappings }
{---------------------------}
// begin of new block
{$IFDEF VER300}
  {$DEFINE SYN_COMPILER_22}
  {$DEFINE SYN_DELPHI}
  {$DEFINE SYN_DELPHI_XE8}
{$ENDIF}
// end of new block 
{$IFDEF VER290}
.......

Answer 2

您可以隐藏表单，并添加另一个提交表单的链接。这有些苛刻，但另一种方法是深入研究CSS文件或深入了解JS文件。

<li>
  <%= link "Logout", to: auth_path(@conn, :logout), method: "delete", class: "hidden", id: "logout-form" %>
  <%= link "Logout", to: "#", onclick: "document.getElementById('logout-form').parentNode.submit();return false;" %>
</li>

Answer 3

我用以下css规则解决了这个问题：

form[method=post].link {
  display: initial;
}

<强>之前

<强>后