如何使用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>

謝謝大家的幫助！