Question

我有一个看起来像这样的vuejs应用

<div id="app">
  <v-app>
    <v-content>
      <v-container fluid>
        <v-radio-group v-for="i in list" :key="i">
          <v-layout row wrap>
            <v-flex md4>
              <v-radio label="Test 1" value="a"></v-radio>
            </v-flex>
            <v-flex md4>
              <v-radio label="Test 2" value="b"></v-radio>
            </v-flex>
            <v-flex md4>
              <v-radio label="Test 3" value="c"></v-radio>
            </v-flex>
          </v-layout>
        </v-radio-group>
      </v-container>
    </v-content>
  </v-app>
</div>

（https://codepen.io/anon/pen/NEErNz）

问题是我想充分利用收音机，但是由vuetify生成的css类v-input__control阻止了这一点。您有什么想法我可以解决这个问题吗？

Wrong -> v-input__control -> width: auto
Correct -> v-input__control -> width: 100%

Answer 1

仅应用样式来覆盖现有的类

<style>
     .v-input__control {
        width: 100% !important
      }
      .v-label {
        width: 100% !important
      }
</style>

Answer 2

Rithy遮篷几乎是正确的，但是有两个问题。 CSS代码会影响应用程序上的每个控件（并且没有作用域），并且v-input__contol类不能由css或您的css处理器访问，因为它的作用域位于控制组组件内。所以：

将班级添加到您的广播组：

<v-radio-group class="radio-group-full-width" v-for="i in list" :key="i">

然后添加css样式（如果不使用SCSS，请参见@JakesInTheSoup答案）

<style scoped lang="scss">
 .radio-group-full-width {
   >>>.v-input__control {
     width: 100%
   }
 }
</style>

“ >>>”很重要，因为它允许CSS访问嵌入式组件范围

Answer 3

@Nacho Moco的答案对我的括号稍作修改，对我有用：

<style scoped>
 .radio-group-full-width >>>.v-input__control {
     width: 100%
 }
</style>

Answer 4

我通过Traxo的评论实现了这一目标。这是我使用Vuetify v1.5.11的布局：

sudo docker system prune -af

还有我的CSS：

<v-radio-group v-model="selectedDate" class="radio-container d-flex">
  <v-radio
    class="radio-item"
    color="primary"
    v-for="item of items"
    :key="item.id"
    :value="item"
    :label="'This is an individual item!'"
  ></v-radio>
</v-radio-group>

Vuetify RadioGroup全宽

4 个答案: