Bootstrap Kiểu dáng với Phương pháp Xóa của Phoenix

Question

Tôi có nhiều liên kết hiển thị trong thanh điều hướng khởi động của tôi như đăng nhập, đăng ký, truy cập trang và đăng xuất. Khi tôi sử dụng phương pháp xóa trong trình trợ giúp liên kết, tôi mất CSS khởi động mặc định của mình. Ví dụ các helper đường dẫn sau:

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

tạo ra html sau:

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

Tuy nhiên nếu tôi muốn phương pháp xóa, chẳng hạn như khi đăng xuất:

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

Tạo biểu mẫu như:

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

Bây giờ thẻ neo của tôi nằm trong biểu mẫu và tôi đã mất CSS mặc định của mình.

tôi cố định nó bằng cách sử dụng một lớp tùy chỉnh:

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

Đây có phải là cách duy nhất để làm điều này? Tui bỏ lỡ điều gì vậy? Điều này thật bất tiện khi tôi phải xác định lại các kiểu CSS để xóa các liên kết.

Answer 1

Tôi đã có chính xác cùng một vấn đề và tôi đã thêm một lớp css bootstrap navbar-text như được hiển thị bên dưới cho Bootstrap 3. Đủ gần với tôi.

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

Đối với Bootstrap 4 tôi sử dụng các lớp 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

Bạn có thể ẩn các biểu mẫu, và thêm một liên kết gửi biểu mẫu. Điều này hơi khó hiểu, nhưng cách khác là đi sâu vào tệp CSS hoặc đi sâu vào tệp 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

tôi giải quyết vấn đề này với các quy tắc css sau:

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

Trước

Sau