Как вставить кнопку справа от элементов крошки в Bootstrap 4?

Question

У меня есть следующие хлебные крошки:

<ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">Home</a>
    </li>
    <li class="breadcrumb-item active">My Account</li>
</ol>

Теперь я хочу вставить кнопку в ту же строку, что и хлебные крошки, но иметь ее float: right, например:

Home  /  My Account    < ---------- Space goes here ---------- >    Button

Я попробовал следующее, но это не работает:

<ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">Home</a>
    </li>
    <li class="breadcrumb-item active">My Account</li>

    <span style="float: right;">
      <li class="breadcrumb-item">
        <button class="btn btn-sm btn-success">
          Create New User
        </button>
      </li>
    </span>

</ol>

Также я попытался использовать класс начальной загрузки float-right безрезультатно.

Как я могу поместить кнопку в одну строку с панировочными сухарями, но плавать правильно? Также не должно быть косой черты / между последней крошкой и кнопкой.

Answer 1

используйте класс начальной загрузки float-left и float-right в ol и ul с nav class

<div class="nav-container">
  <ol class="breadcrumb float-left">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>
  <li class="breadcrumb-item active">My Account</li>
   </ol>
  <ul class="nav  float-right">
  <li>
  <button class="btn btn-sm btn-success">Create New User</button>
  </li>
  </ul>
 </div>

Answer 2

Одним из решений было бы вывести button из ol и расположить его абсолютно. Для этого вам нужно обернуть ol и button в контейнер и установить position:relative; на контейнере:

.nav-container {
  position:relative;
}
button {
  position:absolute;
  right:1rem;
  top:50%;
  transform:translateY(-50%);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="nav-container">
  <ol class="breadcrumb">
      <li class="breadcrumb-item">
        <a href="#">Home</a>
      </li>
      <li class="breadcrumb-item active">My Account</li>
  </ol>
  <button class="btn btn-sm btn-success">Create New User</button>
</div>