如何更改 b-form-select 的宽度
How can I change the width of b-form-select
我正在使用 b-form-select，但默认情况下它使用 100% 宽度。我怎样才能减少宽度？我尝试过类似的方法，但没有用。
<b-form-select v-model="xxx" :options="yyy" width: 50%></b-form-select>
您可以使用 style 或 class 申请 CSS。
此外，width: 50% 无效 HTML，我假设你的意思是 width="50%"，这不适用于 <select>
样式
<b-form-select style="width: 50%"></b-form-select>
Class
<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>
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>
我正在使用 b-form-select，但默认情况下它使用 100% 宽度。我怎样才能减少宽度？我尝试过类似的方法，但没有用。
<b-form-select v-model="xxx" :options="yyy" width: 50%></b-form-select>
您可以使用 style 或 class 申请 CSS。
此外，width: 50% 无效 HTML，我假设你的意思是 width="50%"，这不适用于 <select>
样式
<b-form-select style="width: 50%"></b-form-select>
Class
<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>
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>