css - 移动设备上的 Bulma 模态间距-6ren

css - 移动设备上的 Bulma 模态间距

转载作者：行者123 更新时间：2023-12-05 03:45:54

25

4

因此，在查看 Bulma 文档 ( https://bulma.io/documentation/components/modal/ ) 时，我在桌面和移动设备上都使用了模式，但我遇到了一些格式问题。

在 Bulma 上，移动 View 不会在两侧添加任何间距，如下所示:

有谁知道在 Bulma 模态框上添加间距的 native 方法？我使用了 px-4 效果很好，但它也在桌面上添加了填充，但我有以下模式结构:

<div id="mobile-profile-modal" class="modal">
    <div class="modal-background"></div>
    <div class="modal-card px-4">
        <header class="modal-card-head">
            <p class="modal-card-title"><?= $user->get_first_name(); ?></p>
            <button class="delete" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
            <div class="container">
                <div class="columns is-centered">
                    <div class="column">
                        <button class="button is-fullwidth">Profile</button>
                        <button class="button is-fullwidth">Settings</button>
                    </div>
                </div>
            </div>
        </section>
        <footer class="modal-card-foot">
            <button class="button is-fullwidth is-primary">
                        <span class="icon">
                          <i class="fas fa-sign-out-alt"></i>
                        </span>
                <span>Logout</span>
            </button>
        </footer>
    </div>
</div>

最佳答案

如果您不介意覆盖链接的 Bulma CSS 样式表，您可以这样做:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bulma Modal Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
<style type=text/css>
    .modal-card,
    .modal-content {
        margin: 0 20px;
        max-height: calc(100vh - 160px);
        overflow: auto;
        position: relative;
        /*remove width: 100%;*/
        width: calc(100% - 2em);
    }
    /*modal breakpoint*/
    @media screen and (min-width:769px) {
        .modal-card,
        .modal-content {
            margin: 0 auto;
            max-height: calc(100vh - 40px);
            width: 640px
        }
    }
</style>

关于css - 移动设备上的 Bulma 模态间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65598070/

25

4

0

文章推荐： amazon-web-services - EKS Kubernetes 出站流量

文章推荐： ios - 在 UIKit 中为图像添加阴影

文章推荐： java - 第三方类的 Jackson JSON 自定义类实例化器

文章推荐： reactjs - 如何刷新 Gatsby 中的当前页面？

angularjs - 什么是 Angular 态？
我来自 Asp.Net 世界，试图理解 Angular State 的含义。什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？我听到很多人
javascript - 3 态 CSS 拨动开关
我一直在寻找 3 态拨动开关，但运气不佳。基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。有人

首页

博学

6Ren·AI

商城

css - 移动设备上的 Bulma 模态间距