Question

无法集中v-radio-group。这是我得到的：

<v-container grid-list-md text-xs-center>
  <v-form ref="form>

    <div v-if="question.question_type == 'YESNO' ">
          <v-radio-group v-model="answer">
            <v-layout>

              <v-flex>
                <v-radio
                value="Yes"
                label="Yes"
                ></v-radio>
              </v-flex>

              <v-flex>
                <v-radio
                value="No"
                label="No"
                ></v-radio>
              </v-flex>

            </v-layout>
          </v-radio-group>
        </div>   

  </v-form>
</v-container>

我尝试将'text-xs-center'和'justify-center'类设置为form和div标签，但这没有帮助。我希望此布局（单选按钮）位于表单的中间。

Answer 1

将名为flex-center的类添加到包装单选按钮组的div元素中，并将以下规则添加到CSS中：

.flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  }

完整示例：

new Vue({
  el: '#app',
  data() {
    return {
      question: {
        question_type: 'YESNO'
      },
      answer: ''
    }
  }

})

.flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id="app" data-app>
  <v-container grid-list-md text-xs-center>
    <v-form ref="form">

      <div v-if="question.question_type == 'YESNO'" class="flex-center">
        <v-radio-group v-model="answer">
          <v-layout>

            <v-flex>
              <v-radio value="Yes" label="Yes"></v-radio>
            </v-flex>

            <v-flex>
              <v-radio value="No" label="No"></v-radio>
            </v-flex>

          </v-layout>
        </v-radio-group>
      </div>

    </v-form>
  </v-container>



</div>

Answer 2

实际上，Vuetify的实现方式似乎是这样的：

<v-form>
  <v-radio-group row v-model="answer" class="justify-center">
    <v-radio value="Yes" label="Yes"></v-radio>
    <v-radio value="No" label="No"></v-radio>
  </v-radio-group>
</v-form>

所以在v-radio-group添加row丙，并用然后对齐按钮justify-center。

new Vue({
  el: '#app',
  data: () => ({
    answer: null
  })
})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-xl>
        <v-container grid-list-md text-xs-center>
          <v-form>
            <v-radio-group row v-model="answer" class="justify-center">
              <v-radio value="Yes" label="Yes"></v-radio>
              <v-radio value="No" label="No"></v-radio>
            </v-radio-group>
          </v-form>
        </v-container>
      </v-container>
    </v-content>
  </v-app>
</div>

集中广播组Vuetify

2 个答案: