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 有其弹性盒助手。您只需向我们添加一个类即可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将 a 应用于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>

Answer 2

尝试将它们包装在列类中。
例如：

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