如何让我的 bulma 进度条不超过整个屏幕？

Question

这是我当前的代码：

<progress class="progress is-warning" value="25" max="100">25%</progress>

我希望进度条更短，这意味着它不那么宽。

Answer 1

添加 max-width：<尺寸>；，f.e。调整进度条宽度。

/* progress wrapper to show adjusted progress size */
.progress-wrapper {
  background-color: #ff6a0075;
  padding: .2rem;
}

.progress {
  /* width prop added for example purpose, to simulate wide bar */
  width: 100%;
  max-width: 200px;
}

<div class="progress-wrapper">
  <progress class="progress is-warning" value="25" max="100">25%</progress>
</div>

Answer 2

在不了解您的布局的情况下很难回答这个问题。 Bulma 是一个自以为是的 CSS 框架，其简单性来自 而不是 为每个组件自定义 CSS 。因此，手动添加 max-width 会起作用，但这不是我建议使用 Bulma 的第一个工具。

你想把其他东西放在进度条的同一行吗？如果是这样，最好把那个东西和进度条放在 columns of the appropriate width. Or maybe tiles 更适合您的布局需要。

您希望进度条在屏幕上居中，但在大屏幕上保持合理的宽度吗？这就是 container 的设计目的。

如果您做最终想使用max-width（再次考虑使用布尔玛已经提供的选项之一），我建议添加一个通用的像 is-max-width-large 或类似的装饰器 class，并将其添加到您的进度条，而不是专门为进度条添加 CSS，这与 Bulma 的其余工作方式冲突，并且会使事情更难维护。

如何让我的 bulma 进度条不超过整个屏幕？

How do I make my bulma progress bar not go over the whole screen?

html

web

bulma