Stile di bootstrap con metodo di eliminazione di Phoenix

Question

Ho una varietà di collegamenti visualizzati nella mia barra di navigazione di bootstrap come l'accesso, la registrazione, la visita di pagine e la disconnessione. Quando uso il metodo delete nel link helper, perdo il mio default bootstrap CSS. Per esempio il link seguente aiuto:

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

genera il seguente HTML:

<li><a href="https://stackoverflow.com/users/new">Register</a></li>

Tuttavia se voglio il metodo di eliminazione, come ad esempio quando il logout:

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

Genera un modulo come:

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

Ora il mio tag di ancoraggio è all'interno di un modulo e ho perso il mio CSS predefinito.

ho riparato utilizzando una classe personalizzata:

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

È questo l'unico modo per fare questo? Mi sto perdendo qualcosa? Questo è terribilmente scomodo che devo ridefinire gli stili CSS per eliminare i collegamenti.

Answer 1

Ho avuto esattamente lo stesso problema e ho aggiunto una classe css bootstrap navbar-text come mostrato di seguito per Bootstrap 3. Questo è abbastanza vicino per me.

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

Per Bootstrap 4 Io uso le classi 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

Si potrebbe nascondere il modulo, e aggiungere un altro link che invia il modulo. Questo è un po 'hacky, ma l'alternativa è tuffarsi nel file CSS o tuffarsi nel file 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

ho risolto questo problema con la seguente regola CSS:

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

Prima

Dopo