Flexbox -错误的flex行设置

Question

当我编写下面的代码( 见完整的CodePen测试 )时，我无法获得同一行的无线电组和tthe 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>