Question

我的目标是让导航标签跨越整个页面，以便底线到达页面的末尾。此外，我希望复选框位于此部分的顶部，以与选项卡链接保持一致。到目前为止，这是我的进展：

<div class="float-right">
    <form class="form-inline">
        <label class="custom-control custom-checkbox">
            <input type="checkbox" checked="checked" class="custom-control-input" />
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">Show all</span>
        </label>
        <label class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" />
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">
                Show some
            </span>
        </label>
        <label class="custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" />
            <span class="custom-control-indicator"></span>
            <span class="custom-control-description">
                Show others
            </span>
        </label>
    </form>
</div>

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Next</a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" href="#">Best</a>
    </li>
</ul>

https://jsfiddle.net/jf7jp30g/

我一直在努力了解如何使用z-index，但我似乎没有在那里取得任何进展。任何帮助将不胜感激！

Answer 1

这些方面的东西？

https://jsfiddle.net/jf7jp30g/5/

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Next</a>
  </li>
  <li class="nav-item" style="margin-right:auto;">
    <a class="nav-link active" href="#">Best</a>
  </li>
  <li class="nav-item" style="padding-top:5px">
    <form class="form-inline">
      <label class="custom-control custom-checkbox">
        <input type="checkbox" checked="checked" class="custom-control-input" />
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">Show all</span>
      </label>
      <label class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" />
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">
            Show some
        </span>
      </label>
      <label class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" />
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">
            Show others
        </span>
      </label>
    </form>
  </li>
</ul>

Bootstrap导航标签跨越整个页面

1 个答案: