css - 手机上的布尔玛模态间距
问题描述
因此,在查看 Bulma 文档 ( https://bulma.io/documentation/components/modal/ ) 时,我在桌面和移动设备上都使用了模式,但我遇到了一些格式问题。
在 Bulma 上,移动视图不会在侧面添加任何间距,如下所示:
有谁知道为布尔玛添加模态间距的本地方法?我使用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>
推荐阅读
- python - Pandas - 从 configParser 传递自定义聚合函数
- pandas - 如何使用 python 和 panda 将 csv 数据分成相等的部分
- angular - 是否可以实时更新 ngModel?
- python - 使用 scipy.integrate.quad 并行计算矩阵元素
- vue.js - 函数在第一次调用时起作用,但在第二次调用时不起作用
- google-apps-script - 根据 Google Script 中的 A 查找下一个空闲行
- python - 在全屏 Pygame 窗口期间无法使用系统热键
- r - 如何比较特定日期范围内的 t 检验?
- bash - 在服务器外运行 .sh 文件的问题
- r - R循环遍历三重嵌套列表