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>

此外，我尝试使用bootstrap类float-right但没有结果。

我怎样才能将按钮与面包屑放在同一条线上，但是将它漂浮到右边？此外，最后一个面包屑和按钮之间不应有斜线/。

Answer 1

这是使用bootstrap 4 util类的简单方法：

W = 'Weird'
...
print(W)

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>

Answer 3

使用 nav 类

在ol和ul中使用bootstrap类 float-left 和 float-right

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

如何在Bootstrap 4中插入面包屑元素右侧的按钮？

3 个答案: