使用Phoenix删除方法的Bootstrap样式

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

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

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