如何使用布尔玛创建一系列在CSS中将按钮右对齐的行？

Question

我正在使用布尔玛（以及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

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

<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>

Answer 2

使用justify-content: flex-end

通过检查html，我们可以看到布尔玛类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>