如何在 col-lg-8 中固定元素按钮？答案

【问题标题】：How can I fixed element a button in col-lg-8?如何在 col-lg-8 中固定元素按钮？
【发布时间】：2021-12-07 05:46:54
【问题描述】：

我想要它，如下图所示，但我无法设置。我正在分享我在下面编写的代码。我该如何解决这个问题？

我的代码：

#mybtn{
    position: fixed;
    bottom: 10px;
    right: 10px;
}

<div class="row">
    <div class="col-lg-8" style="position: relative;">
        <p>this is my content</p>
        <button id="mybtn">My Fixed Button</button>
    </div>
    <div class="col-lg-4">
        <p>content area</p>
    </div>
</div>

【问题讨论】：

我认为您可以将d-flex ml-auto 引导类应用于按钮以实现您想做的事情。
将position: absolute 与相对父级一起使用。
使用位置：绝对代替位置：固定

标签： html css bootstrap-4 fixed

【解决方案1】：

您可以将button 包裹在div 中，并在div 上使用d-flex justify-content-end

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="row">
  <div class="col-lg-8 bg-danger">
    <p>this is my content</p>
    <div class='w-100 d-flex justify-content-end'>
      <button id="mybtn" class='btn btn-primary btn-sm'>Button</button>
    </div>
  </div>
  <div class="col-lg-4">
    <p>content area</p>
  </div>
</div>

【讨论】：