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?
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.