如何在Bootstrap 4中的面包屑元素右边插入按钮? [英] How to insert a button right of the breadcrumb elements in Bootstrap 4?

问题描述

我正在使用以下面包屑:

I have the following breadcrumbs in use:

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

现在我想要的是在与面包屑相同的行上插入一个按钮，但是将其添加为float: right，例如:

Now what I want is to insert a button on the same line as the breadcrumbs, but have it float: right, like:

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

我尝试了以下操作，但不起作用:

I tried the following, but it doesn't work:

<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，但没有结果.

Also I tried to use the bootstrap class float-right with no result.

如何将按钮与面包屑放在同一行，但将其正确浮动?最后一个面包屑和按钮之间也不应有斜线/.

How could I place the button on the same line with the breadcrumbs but float it right? Also there should be no slash / between the last breadcrumb and the button.

推荐答案

一种解决方案是将button从ol中取出，并将其完全定位.这需要您将ol和button包裹在容器中，并在容器上设置position:relative;:

One solution would be to take the button out of the ol and position it absolutely. This would require you to wrap the ol and button in a container and set position:relative; on the container:

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

这篇关于如何在Bootstrap 4中的面包屑元素右边插入按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！