Vuetify - Flexbox - неправильная настройка строки Flex - PullRequest
Новая
       18

Vuetify - Flexbox - неправильная настройка строки Flex

0 голосов
/ 07 июня 2018

Когда я пишу следующий код ( см. Полный тест CodePen ), я не могу получить радио-группу и имена 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>

вот захваченный вывод:

output

1 Ответ

0 голосов
/ 08 июня 2018

Проверьте документы в сеточной системе 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>
...