Vuetify - Flexbox - 错误的弹性行设置

Question

当我编写以下代码时 (see complete CodePen test)，我无法在同一行获取单选组和 firstName 和 lastName...我只想将它们包装在较小的屏幕宽度上（移动设备）

    <div id="app">
      <v-app id="inspire">
        <v-container  grid-list-xl text-xs-center fluid>
          <v-layout row wrap>
             <v-flex  xs8 offset-xs2>
               <h4>Thank you for contacting us!<h4>
               <v-container>
                  <v-layout row wrap justify-left>
                    <v-flex xs-6 class="wrapper-l">
                      <form>
                        CONTACT FORM
                        <v-container>
                          <v-layout  column wrap justify-center>
                            <v-flex>
                              <v-container class="cont-2">
                                <v-layout row wrap justify-left>
                                  <v-flex>
                                        <v-radio-group row>
                                            <v-radio class="radio" label="Mrs"></v-radio>
                                            <v-radio class="radio" label="Mr"></v-radio>
                                        </v-radio-group>
                                  <v-text-field class="small-tf" label="first Name"></v-text-field>
                                  <v-text-field class="medium-tf" label="family Name"></v-text-field>
                                  </v-flex>
                                </v-layout>
                              </v-container>
                              <v-text-field label="email"></v-text-field>
                              <v-text-field label="message"></v-text-field>
                            </v-flex>
                          </v-layout>
                          <v-layout row no-wrap>
                            <v-flex>
                              <v-btn>CLEAR</v-btn>
                              <v-btn>SUBMIT</v-btn>
                            </v-flex>
                          </v-layout>
                        </v-container>
                      </form>
                    </v-flex>
                    <v-flex xs-6 class="wrapper-r">
                      INFOS
                      <v-card light flat>
                        <h4>email address </h4>
                        <p>ourcompany@example.com</p>
                        <h4>PHONE</h4>
                        <p>ding-ding /dong-dong</p>
                        <h4>ADDRES</h4>
                        <p>Our Company<br/>Somewhere<br/>on the planet</p>
                        <h4>WE ARE SOCIAL TOO</h4>
                        <p>
                          <a href="#">FBK</a>
                          <a href="#">LKD</a>
                          <a href="#">TWT</a>
                        </p>
                      </v-card>
                    </v-flex>
                  </v-layout>
                </v-container>
             </v-flex> 
           </v-layout>
       </v-container>
      </v-app>
    </div>

这是捕获的输出：

Answer 1

查看 Vuetify 网格系统上的文档：https://vuetifyjs.com/en/layout/grid#introduction

您的代码结构中存在几个问题，例如没有 justify-left 但 justify-start 如果你想为不同的屏幕尺寸包装它，你应该设置断点。

应该这样做：

<v-container class="cont-2">
  <v-layout row wrap>
    <v-flex xs12 sm4>
      <v-radio-group row>
        <v-radio class="radio" label="Mrs"></v-radio>
        <v-radio class="radio" label="Mr"></v-radio>
      </v-radio-group>
    </v-flex>
    <v-flex xs12 sm4>
      <v-text-field label="first Name"></v-text-field>
    </v-flex>
    <v-flex xs12 sm4>
      <v-text-field label="family Name"></v-text-field>
    </v-flex>
  </v-layout>
</v-container>

Vuetify - Flexbox - 错误的弹性行设置

Vuetify - Flexbox - wrong flex row setup

flexbox

vuetify.js