如何对齐 bootstrap-vue 下拉按钮项目答案

【问题标题】：How to align bootstrap-vue dropdown button items around如何对齐 bootstrap-vue 下拉按钮项目
【发布时间】：2019-03-07 20:41:04
【问题描述】：

如何水平对齐下拉按钮子项。我无法通过 CSS 对其进行自定义。控制链接是here

Js Fiddle sample is 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>
                &#x1f50d;<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>

【问题讨论】：

horizontally around 到底是什么意思？
我的意思是从开始的第一个跨度和selected item and icon should be aligned right horizontally。

标签： css vue.js bootstrap-4 bootstrap-vue

【解决方案1】：

在包含slot="button-content" 的div 中添加一个名为dd 的类，该类具有以下规则：

  .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>
            &#x1f50d;<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>

【讨论】：