如何更改 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>