Question

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

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

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

我在具有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（不包括自举程序）：

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

Answer 2

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

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

Answer 3

您可以通过将按钮包装为显示为 block 的任何内容（例如<p />，<div />并使其为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>

谢谢大家的帮助！

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

4 个答案: