html - 如何使用 bootstrap 在我的表单右上角之外放置一个 div？

Question

我得到了一个表单，它显示了一些关于我的应用程序中内容的详细文本。在此表单之外，我有一个“添加新元素”按钮，用户可以单击该按钮转到新页面以添加新元素。

这个按钮现在放在窗体外的左上角，我想把它移到另一边(窗体的右上角)。

在这种情况下，我的按钮是 <router-link>因为我使用的是 Vue.js，所以路由工作正常，并且它的样式为按钮。

我在具有 css-only 属性的 vue.js 应用程序中使用 bootstrap-4。

我试过“float: right;”，并添加了

<div class="row"> <div class="col"></div></div>

“强制”按钮在列中移动，但它不起作用。

所以这就是我的代码现在的样子:

<div class="container-fluid">
   <div class="details">
     <div class="d-flex justify-content-md-center">
       <div class="row">
       <div class="col create-new-item-button">
         <div class="">
           <router-link
             class="btn btn-primary"
             style="margin-bottom: 30px"
             :to="{ name: 'Create new item' }"
           >Create new item </router-link>
         </div>
       </div>
     </div>
       <form>
<p>Text in my form and other stuff</p>
</form>
</div>
</div>
</div>

我的 css(除了 bootstrap 自己的):

.details {
  width: 100%;
  position: relative;
}

form {
  background-color: white;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-bottom: 50px;
border-style: solid;
border-color: black; 

}

.create-new-item-button {
  float: right;
}

我应该怎么做才能把它移到右上角，在表格外面？

Answer 1

如果你想把它放在.details之外，试着给它position: absolute; left: 100%;