css - 如何使用 Bulma 创建一系列行，其中按钮在 css 中右对齐？

Question

我正在使用 Bulma(和带有 Vue 的 Buefy)，我有一个面板，其中包含一系列定义如下的元素:

<template>
  <div v-if="user">
    <nav class="panel">
      <p class="panel-heading">
        Cities
      </p>
      <div class="panel-block" v-for="c in user.cities">
        <div class="is-pulled-left">{{c}}</div>
        <div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
      </div>
    </nav>
  </div>
</template>

看起来像这样:

如何让按钮右对齐，而不是左对齐？

Answer 1

2021 年更新:较新版本的 bluma 有其 flex box 助手。您只需向我们的 panel-block 添加一个类即可实现此效果。像这样使用 is-justify-content-space-between:

<div class="panel-block is-justify-content-space-between" v-for="c in user.cities">
  <div class="is-pulled-left">{{c}}</div>
  <div class="is-pulled-right"><fai class="has-text-danger" icon="minus-circle"></fai></div>
</div>

---

使用justify-content: flex-end

通过检查 html，我们可以看到 Bulma 类 panel-block 将 justify-content: flex-start 应用于它的所有子元素。这意味着即使您将 is-pulled-right 应用到内部 div，所有内容都将始终位于左侧。将 justify-content: flex-end 应用到外部父容器将强制一切向右。因此，简而言之，您可以覆盖 Bulma 的一些默认样式以获得您想要的。

.end {
  justify-content: flex-end !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />

<div>
  <nav class="panel">
    <p class="panel-heading">
      Cities
    </p>
    <div class="panel-block end">
      <div class="">New York</div>
    </div>
    <div class="panel-block end">
      <div class="">London</div>
    </div>
    <div class="panel-block end">
      <div class="">Paris</div>
    </div>
  </nav>
</div>