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

Question

I'm using Bulma (and Buefy with Vue) and I've got a panel with a series of items defined like this:

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

That looks like this:

How do I get it so the buttons are aligned on the right, not the left?

Answer 1

2021 Update: Newer versions of bluma have their flex box helpers. You can just add a single class to our panel-block to achieve this effect. Use is-justify-content-space-between like so:

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

---

Use justify-content: flex-end

Just by inspecting the html, we can see that the Bulma class panel-block applies a justify-content: flex-start to all it's child elements. This means that even if you apply is-pulled-right to the inner divs, everything will always be positioned left. Applying justify-content: flex-end to the outer parent container will force everything to the right. So, in short, you can override some of Bulma's default styling to get what you want.

 .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

Try wrapping them in a column class.
For example:

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