bootstrap 4创建具有多行模态页脚

sigwle7e 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(3)|浏览(147)

我试图在bootstrap 4中获得一个模态页脚，使其具有多个100%宽度的行。那么对于下面最基本的bootstrap模态示例，是否可以使Close和保存changes按钮位于不同的行上，并且都是100%宽度？

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div><div class="modal-body">
            ...
          </div><div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/45105736/bootstrap-4-create-modal-footer-with-multiple-rows

3条答案

按热度按时间

4xy9mtcn1#

是的，您可以放置两个modal-footer元素。

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body">
        ...
      </div>

      <div class="modal-footer">
        <button type="button col-lg-12" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>

      <div class="modal-footer">
        <button type="button col-lg-12" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

然后在您的CSS中添加以下内容

#exampleModalLong .modal-footer .btn {
  width:100%;
}

这里有一个jsfiddle link

赞(0）回复(0）举报 2022-12-08

0aydgbwb2#

更“自然”的做法是添加

.modal-footer {
  display: block;
}

默认值display: flex使按钮共享同一行。

赞(0）回复(0）举报 2022-12-08

jhiyze9q3#

两次modal-footer也会产生两个边界。
使用border-0可以轻松删除：

<div class="modal-footer">
    ...
</div>
<div class="modal-footer border-0">
    ...
</div>

赞(0）回复(0）举报 2022-12-08

我来回答

bootstrap 4创建具有多行模态页脚

3条答案

相关问题

热门标签

最新问答