Как разместить div вне правого верхнего угла формы, используя bootsrap?

Question

Я получил форму, и она отображает подробный текст о материалах в моем приложении. За пределами этой формы у меня есть кнопка «Добавить новый элемент», по которой пользователь может щелкнуть, чтобы перейти на новую страницу, чтобы добавить новый элемент.

Эта кнопка теперь находится в верхнем левом углу за пределами формы, и я хотел бы переместить ее на другую сторону (правый верхний угол формы).

В этом случае моей кнопкой является <router-link>, так как я использую Vue.js, и маршрутизация работает нормально, и она стилизуется как кнопка.

Я использую bootstrap-4 в своем приложении vue.js со свойством css-only.

Я попробовал "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

Хорошо, поэтому решение пришло к следующему:

Я принял ваш совет и выяснил все.Итак, я переместил весь раздел кнопки (столбец и все) и поместил его под тег </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>

Спасибо всем за помощь!

Answer 3

Вы можете легко достичь желаемого, обернув кнопку всем, что отображается как блок , например, <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

Вы можете использовать position: absolute; right: 0; для div с строкой класса в вашем собственном css, как в этом примере: https://codepen.io/anon/pen/gNXxxb

Я просто добавил «my-custom-class» в строку иотредактировал его на css