如何使用引导程序将 div 放在表单右上角之外？答案

【问题标题】：How to place a div outside the upper right corner of my form using bootsrap?如何使用引导程序将 div 放在表单右上角之外？
【发布时间】：2019-11-09 13:18:15
【问题描述】：

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

这个按钮现在位于表单外的左上角，我想把它移到另一边（表单的右上角）。

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

我在我的 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;
}

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

【问题讨论】：

您是否研究过使用弹性框定位元素？ Flex box 带有 bootstrap 4，让生活变得更轻松，而无需使用浮动。 getbootstrap.com/docs/4.0/utilities/flex
您可以将按钮移动到标记中的表单之后。
@FrankA 是的，我做到了。我已经尝试了一些，但它仍然没有按照我的方式进行......这个代码笔确实说明了它在我看来的样子：[链接]（codepen.io/anon/pen/gNXxxb）现在当它是绝对定位时，它也是远离表格

标签： html css vue.js bootstrap-4

【解决方案1】：

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

【讨论】：

太奇怪了，当我这样做时它不起作用....我拿出了整个 ``

```整个东西都消失了，没有显示

【解决方案2】：

您可以将position: absolute; right: 0; 用于自定义css 上带有类行的div，就像这个例子一样：https://codepen.io/anon/pen/gNXxxb

我刚刚将“my-custom-class”添加到该行并在 css 上对其进行了编辑

【讨论】：

好的，所以我尝试了你的建议，它确实移动了按钮。虽然，当它显示在浏览器中时，它在右侧并且不在表单附近。
codepen.io/anon/pen/gNXxxb 你能看到我在表单周围添加了一个黑色实心边框吗？我希望按钮显示在右上角的位置
好吧，因为 position: absolute 假定相对于父元素的位置，在这种情况下，它不会起作用，因为您的按钮在表单之外。如果您希望您的按钮位于 FORM 元素的右侧，首先您需要将按钮容器放入其中。我对笔进行了一些更改，并使用了 flexbox 和 justify-content 来对齐按钮容器。看一看：codepen.io/anon/pen/PrOJKK?editors=1100
是的，我想要它在表格的右侧。但在这种情况下，它位于表单内部。我希望它有这个位置，但在表单的边界之外。
在这种情况下，只需将按钮和表单包装成一个父元素:)

【解决方案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>

【讨论】：

【解决方案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>

感谢大家的帮助！

【讨论】：