如何改变b-form-select的宽度?

Question

我使用b-form-select，但默认情况下它使用100%的宽度。我如何减小宽度?我试过类似的方法，但是行不通。

<b-form-select v-model="xxx" :options="yyy" width: 50%></b-form-select>

Answer 1

您可以使用style或class应用CSS。此外，width: 50%不是有效的HTML，我假设你的意思是width="50%"，它不会在<select>上工作

风格

<b-form-select style="width: 50%"></b-form-select>

班

<b-form-select class="w-50"></b-form-select>

new Vue({
el: "#app"
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app" class="p-3">
<b-form-select style="width: 50%"></b-form-select>
<hr />
<b-form-select class="w-50"></b-form-select>
</div>

Answer 2

Bootstrap-Vue使用12列布局系统。使用<b-row>和<b-col>与cols属性。在本例中，您需要6种颜色，即12的一半:

<b-row>
<b-col cols="6">
<b-form-select v-model="xxx" :options="yyy"></b-form-select>
</b-col> 
</b-row>

使用cols允许基于屏幕宽度的动态大小。例如，如果你想在移动设备上占全宽，而在其他屏幕尺寸上占一半，你可以这样做:

<b-row>
<b-col cols="12" sm="6">
<b-form-select v-model="xxx" :options="yyy"></b-form-select>
</b-col> 
</b-row>