I can’t get a Logout button (or plain link) to look good in either a Bootstrap or Bulma navbar. My general question is: how do you make a <form> that wraps an <a class="button"...>...</a> render the same as the <a> alone?

Per the Phoenix book, logging out is done with:

link("Log out", to: session_path(conn, :delete, current_user)

… producing something like:

<form action="/sessions/4" class="link" method="post">
      <input name="_method" type="hidden" value="delete">
      <input name="_csrf_token" type="hidden" value="JBxGTxkhJX09aUM+IjEVNwQHFF8jEAAAbPi+AtgRE+5sMuDRLfFmjg==">
      <a data-submit="parent" href="#" rel="nofollow">
      Log out</a>
</form>

I can’t figure out how to wrap this or adorn it with class= such that it works across devices.

For example, I can get Logout to look right with Bootstrap in a wide window, but I get a misaligned entry in a phone-sized window:

Screen Shot 2016-11-12 at 4.34.50 PM.png998×428 16.9 KB

In Bulma, which seems pretty nice, the result of:

        <span class="nav-item">
          <form action="/sessions/4" method="post">
            <input name="_method" type="hidden" value="delete">
            <input name="_csrf_token" type="hidden" value="JBxGTxkhJX09aUM+IjEVNwQHFF8jEAAAbPi+AtgRE+5sMuDRLfFmjg==">
            <a class="button" data-submit="parent" href="#" rel="nofollow">
              Log out
            </a>
          </form>
          
          <a class="button is-info">
            Sign up
          </a>
        </span>

… is buttons with no space between them in wide view:

Screen Shot 2016-11-12 at 4.44.48 PM.png406×218 7.94 KB

… whereas two plain <a class="button"...> tags have a nice gap between them. (There’s a different problem in layout view.)

I’m getting too close to giving up on any server-side rendering and doing everything in Elm on the client side. Save me from myself!