如何使用 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>

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>