twitter-bootstrap - 使用 Phoenix 的 Delete 方法进行 Bootstrap 样式设置

Question

我的 Bootstrap 导航栏中显示了各种链接，例如登录、注册、访问页面和注销。当我在链接助手中使用删除方法时，我丢失了默认的 Bootstrap 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>

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

我通过使用自定义类来修复它:

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

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

Answer 1

我遇到了完全相同的问题，我添加了一个 Bootstrap css 类 navbar-text如下所示的 Bootstrap 3。这对我来说已经足够接近了。

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

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

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