css - Bulma:将模态框向右对齐
问题描述
我正在尝试将我的模态向右对齐(就像这里的这个问题:在 Bootstrap 4 的右侧对齐模态)但是使用 Bulma 并覆盖该modal
答案中的类不起作用。
我尝试添加一些随机的 flexbox 助手(我并不是真的在这里做什么......)但这似乎也没有什么不同。有人可以告诉我如何使用 Bulma 将模态对齐到右侧吗?
谢谢!
编辑:我在这里创建了一个 jsfiddle 。
解决方案
#modal.modal
您可以通过重写和#modal .modal-card
样式来实现这一点。并将样式modal-card更改 为类似这样。
样式.css
#modal.modal {
align-items: start;
flex-direction: row;
justify-content: end;
}
#modal .modal-card {
max-height: 100%;
min-height: 100%;
width: 300px;
margin-right: 0;
}
@media screen and (min-width: 769px) {
#modal .modal-card {
margin-right: 0;
}
}
var open = document.querySelector('.open-modal');
var modal = document.querySelector('#modal');
var close = document.querySelector('#close');
open.addEventListener('click', function() {
modal.classList.add('is-active');
});
close.addEventListener('click', function() {
modal.classList.remove('is-active');
});
#modal.modal {
align-items: start;
flex-direction: row;
justify-content: end;
}
#modal .modal-card {
max-height: 100%;
min-height: 100%;
width: 300px;
margin-right: 0;
}
@media screen and (min-width: 769px) {
#modal .modal-card {
margin-right: 0;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<section class="section">
<div class="columns">
<div class="column is-4-tablet is-3-desktop is-2-widescreen"></div>
<div class="column">
<h1 class="title">Customers</h1>
<!-- modal content -->
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button id="close" class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="title">
Modal content here but would like this to be right aligned.. something that looks like a right panel
</p>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>
<nav class="level">
<div class="level-left">
<p class="level-item">
<button class="open-modal button is-success">Open Modal</button>
</p>
</div>
</nav>
<table class="table is-hoverable is-fullwidth">
<thead>
<tr>
<th class="is-narrow">
<input type="checkbox" />
</th>
<th>Name</th>
<th>Email</th>
<th>Country</th>
<th>Orders</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<a href="edit-customer.html">
<strong>John Miller</strong>
</a>
</td>
<td><code>johnmiller@gmail.com</code></td>
<td>United States</td>
<td>
<a href="customer-orders.html">7</a>
</td>
<td>
<div class="buttons">
<a class="button is-small" href="edit-customer.html">Edit</a
>
<a class="button is-small">Delete</a>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<a href="edit-customer.html"><strong>Samantha Rogers</strong></a
>
</td>
<td><code>samrogers@gmail.com</code></td>
<td>United Kingdom</td>
<td>
<a href="customer-orders.html">5</a>
</td>
<td>
<div class="buttons">
<a class="button is-small" href="edit-customer.html">Edit</a
>
<a class="button is-small">Delete</a>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<a href="edit-customer.html"><strong>Paul Jacques</strong></a>
</td>
<td><code>paul.jacques@gmail.com</code></td>
<td>Canada</td>
<td>
<a href="customer-orders.html">2</a>
</td>
<td>
<div class="buttons">
<a class="button is-small" href="edit-customer.html">Edit</a
>
<a class="button is-small">Delete</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
推荐阅读
- java - 如何将 n-Queens 问题扩展到三个维度?
- android - 我可以从网络浏览器访问 Android 日历吗?
- hash - 在哈希表中插入的复杂性
- angularjs - 流星(1.6)如何使用离线图片大气包(chrisben:imgcache)
- xamarin.forms - Xamarin Forms:无法将命令参数值从 XAML 传递到 ViewModel
- c# - 如何将计算值添加到此 TryUpdateModelAsync<>
- powerbi - Power BI - 最大日期或所选日期的最近日期
- html - 从 Word 文档编码 PDF 友好的 HTML 页面
- angular - 可以从 Windows 和 Web 客户端访问作为 Windows 服务托管的 WCF 服务吗?
- http - 在golang http包中拆分http请求头有意义吗?