Bootstrap 4 кнопка выравнивания вправо на навигационных вкладках останавливает границу

Question

Я помещаю кнопку с правой стороны моих навигационных вкладок, но это приводит к остановке линии непосредственно перед положением кнопки.Это не функциональная проблема, но выглядит как плохое качество дизайна.

Кнопка не должна быть помещена в элемент списка, а должна оставаться сама по себе, поэтому этот ответ не работает в моемдело.Есть ли решение для этого без дополнительных 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>

Fiddle: http://jsfiddle.net/7dg9zaex/

Answer 1

Я бы сделал контейнер flexbox (d-flex) и использовал утилиты border для контейнера кнопки.

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

Демо