我得到了一个表单,它显示了一些关于我的应用程序中内容的详细文本。 在此表单之外,我有一个“添加新元素”按钮,用户可以单击该按钮转到新页面以添加新元素。
这个按钮现在放在窗体外的左上角,我想把它移到另一边(窗体的右上角)。
在这种情况下,我的按钮是 <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;
}
我应该怎么做才能把它移到右上角,在表格外面?
最佳答案
如果你想把它放在.details
之外,试着给它position: absolute;
left: 100%;
关于html - 如何使用 bootstrap 在我的表单右上角之外放置一个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56792370/