作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
关闭。这个问题需要debugging details .它目前不接受答案。
想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。
17 天前关闭。
Improve this question
我试图将我的模式向右对齐(就像这里的这个问题: align Modal on the right side in Bootstrap 4 )但使用 Bulma 并覆盖 modal
该答案中的类(class)不起作用。
我尝试添加一些随机的 flexbox 助手(我真的不知道我在这里做什么......)但这似乎也没有什么不同。有人可以告诉我如何使用 Bulma 将模态对齐到右侧吗?
谢谢!
编辑 :我创建了一个 jsfiddle here .
最佳答案
您可以通过重写 #modal.modal
来实现这一点。和 #modal .modal-card
样式。并更改了样式 modal-card 看起来像 this .
样式文件
#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>
关于css - Bulma:将模态向右对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69742173/
我来自 Asp.Net 世界,试图理解 Angular State 的含义。 什么是 Angular 状态?它类似于Asp.Net中的ascx组件吗?是子页面吗?它类似于工作流程状态吗? 我听到很多人
我一直在寻找 3 态拨动开关,但运气不佳。 基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始,一旦用户向左或向右滑动,就无法回到N/A(未回答)状态。 有人
我是一名优秀的程序员,十分优秀!