如何使用bootsrap将div放置在表单右上角之外？

Question

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

现在，此按钮位于表单外部的左上角，我想将其移到另一侧（表单的右上角）。

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

我在vue.js应用程序中使用具有css-only属性的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之外， .details尝试赋予其position: absolute; left: 100%;

Answer 2

您可以使用position: absolute; right: 0; position: absolute; right: 0; 到带有自定义CSS上的类行的div，就像下面的示例一样： https : //codepen.io/anon/pen/gNXxxb

我刚刚在行中添加了“我的自定义类”，并在CSS上对其进行了编辑

Answer 3

您可以通过将按钮包装成任何显示为block的内容 （例如<p /> ， <div />并将其设置为text-align:right;来轻松实现所需的功能text-align:right; 。 无需浮动，无需绝对定位。

<div class="container-fluid">
    <div class="details">
        <p class="text-right">
            <router-link
              class="btn btn-primary"
              style="margin-bottom: 30px"
              :to="{ name: 'Create new item' }"
            >Create new item </router-link>
        </p>
        <form>
            <p>Text in my form and other stuff</p>
        </form>
    </div>
</div>

Answer 4

好的，解决方案就这样了：

我接受了您的建议，并弄清楚了。 因此，我移动了按钮的整个部分（列和所有内容），并将其放置在</form >标签下。

现在看起来像这样：

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

            </div>
          </div>
      </div>

谢谢大家的帮助！