Question

我在导航选项卡的右侧放置了一个按钮，但是这导致该行在按钮位置之前停止。这不是功能性问题，但看起来像是质量很差的设计。

该按钮不应放在列表项中，而应单独使用，因此对于我来说this answer不起作用。有没有额外的CSS的解决方案吗？

示例代码：

<div class="clearfix">
    <span class="float-right">
      <button class="btn btn-sm btn-outline-secondary">
        Button 1
      </button>
      <button class="btn btn-sm btn-outline-secondary">
        Button 2
      </button>
    </span>
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</div>

提琴：http://jsfiddle.net/7dg9zaex/

Answer 1

我将制作容器flexbox（d-flex），并在按钮容器上使用border utils。

<div class="container">
    <div class="d-flex mt-3">
        <ul class="nav nav-tabs flex-grow-1 flex-nowrap">
            <li class="nav-item">
                <a class="nav-link active" href="#">Active</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>

        <span class="ml-auto text-nowrap border border-top-0 border-left-0 border-right-0">
          <button class="btn btn-sm btn-outline-secondary">
            Button 1
          </button>
          <button class="btn btn-sm btn-outline-secondary">
            Button 2
          </button>
        </span>
    </div>
</div>

Demo

导航选项卡上的Bootstrap 4右对齐按钮停止边框

1 个答案: