ナビバーの一部タブを右寄せにする

問題

「更新履歴」と「プレゼンテーション」の位置がmasterブランチとapply-bootstrap4ブランチで逆になっていたので修正しようとしたら、プレゼンテーションタブの位置がだいぶ左側によってしまった。

apply-bootstrap4 ブランチで

プレゼンテーションを更新履歴のすぐ右側に持っていきたかったのだが、だいぶ左側によってしまった。

やったこと

• なぜ「更新履歴」は右寄せができているのかを確認したら

<li class="nav-item ml-md-auto">

が設定されていたので 「更新履歴」のclassに書かれていたことを、プレゼンテーションのクラスに書き換えたらできた。

page_tabs.html
<!-- presentation -->
  {% if not page.isPortal() %}
      <a href="?presentation=1" class="nav-link toggle-presentation">
        <i class="icon-film"></i><span class="hidden-xs"> {{ t('Presentation Mode') }}</span>
      </a>
    </li>
  {% endif %}

page_tabs.html
<!-- revision history -->
    <li class="nav-item">
      <a class="nav-link" href="#revision-history" role="tab" data-toggle="tab">
        <i class="icon-layers"></i><span class="hidden-xs"> {{ t('History') }}</span>
      </a>
    </li>

ml-md-autoとは

Bootstrap4移行ガイドより⤴︎ external_link

変更後

参考文献：【Bootstrap 4】navbar の一部の nav-item を右寄せに external_link
これは、右側のタブにmargin-leftを指定するのではなく、左側のタブにmargin-rightを設定することでタブの右寄せをしている。