css 将按钮放置在模态

dgjrabp2 于 2023-01-27 发布在其他

关注(0)|答案(2)|浏览(162)

有谁能帮我解决一下我的问题吗？这两个按钮应该在页脚侧，也就是在模态的底部。只关注这两个按钮，不要介意其他内容，呵呵。我对模态的高度做了一些调整，因为我试图复制模态设计的高度给我们。
下面是附件jfiddle来充分阐述我的问题。谢谢！https://jsfiddle.net/wqj9x0md/

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

<button class="btn m-2 btn-primary add-order myBtn">ADD ORDER</button>

<!-- Trigger/Open The Add Order -->
<div id="modal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-body">
      <span class="close float-end">&times;</span></h3>

      <form action="" method="">

        <div class="row title">
          <div class="col">Order</div>
          <div class="col">Pieces</div>
          <div class="col">Price</div>
        </div>

        <div class="row add-order-info text-center">
          <div class="col">

            <div class="dropdown">
              <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                Select...
              </button>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Laptop</a></li>
                <li><a class="dropdown-item" href="#">Computer</a></li>
                <li><a class="dropdown-item" href="#">IPAD</a></li>
              </ul>
            </div>

          </div>

          <div class="col">
            <input type="text" name="" id="">
          </div>

          <div class="col">
            <input type="text" name="" id="">
          </div>
        </div>



        <div id="formsContainer">
          <div style="display: none;" id="form1">

            <form action="" method="" id="add-order-form">
              <div class="row add-order-info text-center">
                <div class="col">

                  <div class="dropdown">
                    <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                      Select...
                    </button>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#">Laptop</a></li>
                      <li><a class="dropdown-item" href="#">Computer</a></li>
                      <li><a class="dropdown-item" href="#">IPAD</a></li>
                    </ul>
                  </div>

                </div>

                <div class="col">
                  <input type="text" name="" id="">
                </div>

                <div class="col">
                  <input type="text" name="" id="">
                </div>
              </div>
            </form>
          </div>
        </div>

        <button type="button" value="Add Child" onclick="addForm();" id="add-button">
          &plus;
        </button>

        <div class="center my-3">
          <div class="row fw-bold">
            <div class="col-4 total" style="color: #116657;">TOTAL</div>
            <div class="col-3">450</div>
          </div>
        </div>

           <div class="d-inline d-flex justify-content-center
           align-items-center">
          <button class="btn-add-order" type="submit">Add Order</button>
          <button class="btn-cancel-order">Cancel</button>
        </div>

      </form>

    </div>
  </div>
</div>
<!-- Modal END -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

css

来源：https://stackoverflow.com/questions/75223091/putting-the-button-in-the-footer-area-of-the-modal

2条答案

按热度按时间

nqwrtyyt1#

包含Add order和Cancel按钮的div元素：

<div class="d-inline d-flex justify-content-center align-items-center" ...

可以定位为绝对值，因为模态已经具有position:relative;
如果你这样设计它：

position: absolute;
bottom: 1em;
left: 50%;
transform: translate(-50%, 0);

您将使其居中，并与其父级下边框间隔1em。

但是......当然我忘了考虑到绝对位置会将元素从流中分离出来，并且它不会再占用空间。

因此，正如你在评论中指出的，有些内容可能会重叠。
有一个解决方案，同时仍然保持绝对定位战略，但我不喜欢它确实。
您可以在包含块上放置一个填充底部，其厚度与按钮条纹的高度相同。
但这非常烦人，因为您应该将position: relative;移动到.modal-content而不是.modal-body，并且还应该使用padding-bottom: 4em;对其进行样式设置
就我在你的jsfiddle中尝试的那样，它会工作，但我是第一个说一定有更好的方法的人。

赞(0）回复(0）举报 2023-01-27

x7rlezfr2#

如果你看一下代码你会发现有一个类叫做“modal-body”里面的内容是body，如果你想在页脚显示按钮你将不得不添加一个类为“modal-footer”的div你可以看出它将显示页脚的内容通过它的名字哈哈
下面是模态函数的完整代码：

<div class="modal-content">
<div class="modal-body">
  <span class="close float-end">&times;</span>

  <form action="" method="">

    <div class="row title">
      <div class="col">Order</div>
      <div class="col">Pieces</div>
      <div class="col">Price</div>
    </div>

    <div class="row add-order-info text-center">
      <div class="col">

        <div class="dropdown">
          <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
            Select...
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Laptop</a></li>
            <li><a class="dropdown-item" href="#">Computer</a></li>
            <li><a class="dropdown-item" href="#">IPAD</a></li>
          </ul>
        </div>

      </div>

      <div class="col">
        <input type="text" name="" id="">
      </div>

      <div class="col">
        <input type="text" name="" id="">
      </div>
    </div>



    <div id="formsContainer">
      <div style="display: none;" id="form1">

        <form action="" method="" id="add-order-form">
          <div class="row add-order-info text-center">
            <div class="col">

              <div class="dropdown">
                <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
                  Select...
                </button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Laptop</a></li>
                  <li><a class="dropdown-item" href="#">Computer</a></li>
                  <li><a class="dropdown-item" href="#">IPAD</a></li>
                </ul>
              </div>

            </div>

            <div class="col">
              <input type="text" name="" id="">
            </div>

            <div class="col">
              <input type="text" name="" id="">
            </div>
          </div>
        </form>
      </div>
    </div>

    <button type="button" value="Add Child" onclick="addForm();" id="add-button">
      &plus;
    </button>

    <div class="center my-3">
      <div class="row fw-bold">
        <div class="col-4 total" style="color: #116657;">TOTAL</div>
        <div class="col-3">450</div>
      </div>
    </div>


  </form>

</div>
<div class="modal-footer">
  <div class="d-inline d-flex justify-content-center
       align-items-center">
    <button class="btn-add-order" type="submit">Add Order</button>
    <button class="btn-cancel-order">Cancel</button>
  </div>

</div>

赞(0）回复(0）举报 2023-01-27

我来回答

css 将按钮放置在模态

2条答案

相关问题

热门标签

最新问答