如何对齐 bootstrap-vue 下拉按钮项目
How to align bootstrap-vue dropdown button items around
如何水平对齐下拉按钮子项目。我无法通过 CSS 对其进行自定义。控制 link 是 here
预期设计:
new Vue({
el: '#app',
data:{
fruits: ['Apple', 'Banana', 'Orange'],
selectedFruit: '',
},
methods: {
selectFruit (index) {
this.selectedFruit = this.fruits[index]
}
}
})
.dropdown-demo {
width: 200px;
background-color: white;
border-bottom: solid 1px black;
>div {
background-color: azure;
width: 100%;
button {
background-color: yellow !important;
padding-left: 0;
padding-right: 0;
width: 100%;
text-align: right
}
}
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div class="dropdown-demo">
<b-dropdown variant="link" size="lg" no-caret>
<template slot="button-content">
<span>Fruits:</span>
<span> {{selectedFruit}}</span>
🔍<span class="sr-only">Search</span>
</template>
<b-dd-item v-for="(item, id) in fruits"
@click="selectFruit(id)"
:key="id">
{{item}}
</b-dd-item>
</b-dropdown>
</div>
</div>
向包含 slot="button-content"
的 div 添加一个名为 dd
的 class,它具有以下规则:
.dd{
width:190px;
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
}
new Vue({
el: '#app',
data:{
fruits: ['Apple', 'Banana', 'Orange'],
selectedFruit: '',
},
methods: {
selectFruit (index) {
this.selectedFruit = this.fruits[index]
}
}
})
.dropdown-demo {
width: 200px;
background-color: white;
border-bottom: solid 1px black;
}
.dd{
width:190px;
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
}
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div class="dropdown-demo">
<b-dropdown variant="link" size="lg" no-caret>
<div slot="button-content" class="dd">
<div>Fruits:</div>
<div> {{selectedFruit}}</div>
🔍<span class="sr-only">Search</span>
</div>
<b-dd-item v-for="(item, id) in fruits"
@click="selectFruit(id)"
:key="id">
{{item}}
</b-dd-item>
</b-dropdown>
</div>
</div>
如何水平对齐下拉按钮子项目。我无法通过 CSS 对其进行自定义。控制 link 是 here
预期设计:
new Vue({
el: '#app',
data:{
fruits: ['Apple', 'Banana', 'Orange'],
selectedFruit: '',
},
methods: {
selectFruit (index) {
this.selectedFruit = this.fruits[index]
}
}
})
.dropdown-demo {
width: 200px;
background-color: white;
border-bottom: solid 1px black;
>div {
background-color: azure;
width: 100%;
button {
background-color: yellow !important;
padding-left: 0;
padding-right: 0;
width: 100%;
text-align: right
}
}
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div class="dropdown-demo">
<b-dropdown variant="link" size="lg" no-caret>
<template slot="button-content">
<span>Fruits:</span>
<span> {{selectedFruit}}</span>
🔍<span class="sr-only">Search</span>
</template>
<b-dd-item v-for="(item, id) in fruits"
@click="selectFruit(id)"
:key="id">
{{item}}
</b-dd-item>
</b-dropdown>
</div>
</div>
向包含 slot="button-content"
的 div 添加一个名为 dd
的 class,它具有以下规则:
.dd{
width:190px;
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
}
new Vue({
el: '#app',
data:{
fruits: ['Apple', 'Banana', 'Orange'],
selectedFruit: '',
},
methods: {
selectFruit (index) {
this.selectedFruit = this.fruits[index]
}
}
})
.dropdown-demo {
width: 200px;
background-color: white;
border-bottom: solid 1px black;
}
.dd{
width:190px;
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:center;
}
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div class="dropdown-demo">
<b-dropdown variant="link" size="lg" no-caret>
<div slot="button-content" class="dd">
<div>Fruits:</div>
<div> {{selectedFruit}}</div>
🔍<span class="sr-only">Search</span>
</div>
<b-dd-item v-for="(item, id) in fruits"
@click="selectFruit(id)"
:key="id">
{{item}}
</b-dd-item>
</b-dropdown>
</div>
</div>