Bootstrap 使用 Phoenix 的删除方法进行样式设置

Question

我的 bootstrap 导航栏中会显示各种 link，例如登录、注册、访问页面和注销。当我在 link 助手中使用 delete 方法时，我丢失了我的默认值 bootstrap CSS。例如下面的 link 助手：

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

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

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

这是唯一的方法吗？我错过了什么吗？这非常不方便，我必须重新定义 CSS 样式才能删除 links.

Answer 1

我遇到了完全相同的问题，我添加了 bootstrap css class navbar-text 如下所示 Bootstrap 3。我.

<li><%= link gettext("logout"), to: session_path(@conn, :delete, @current_user), method: "delete", class: "navbar-text" %></li>

对于 Bootstrap 4 我使用 classes nav-item nav-link:

<li><%= link gettext("logout"), to: session_path(@conn, :delete, @current_user), method: "delete", class: "nav-item nav-link" %></li>

Answer 2

您可以隐藏表单，然后添加另一个 link 来提交表单。这有点 hacky，但另一种方法是深入研究 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;
}

之前

之后

Bootstrap 使用 Phoenix 的删除方法进行样式设置

Bootstrap Styling with Phoenix's Delete Method

twitter-bootstrap

phoenix-framework