Vuetify.js: позиция втораяэлементы централизованно внутри - PullRequest
Новая
       12

Vuetify.js: позиция втораяэлементы централизованно внутри

0 голосов
/ 10 мая 2018

У меня есть <v-layout>, содержащий два <v-flex> элемента: 

<v-layout row wrap align-center>
  <v-flex>
    <v-text-field
      value="search"
      style="float:left">
    </v-text-field>
  </v-flex>
  <v-flex>
    <v-btn><v-icon>search</v-icon></v-btn>
  </v-flex>
</v-layout>

Прямо сейчас элементы выровнены влево вот так . Я хочу, чтобы они были выровнены по центру (как основное изображение и две серые кнопки на картинке, связанной выше). Как этого добиться?

Ответы [ 2 ]

0 голосов
/ 11 мая 2018

Вы можете обернуть оба элемента в другой v-layout > v-flex и использовать директиву offset- для добавления левого и правого отступа (построение поверх примера @kiarashws): 

  <v-layout>
    <v-flex xs12 sm8 offset-sm2>
      <v-layout>
        <v-flex xs11>
          <v-text-field
          value="search"
          style="float:left">
          </v-text-field>
        </v-flex>
        <v-flex xs1>
          <v-btn color="primary"><v-icon>search</v-icon></v-btn>
        </v-flex>
      </v-layout>
    </v-flex>
  </v-layout>
0 голосов
/ 10 мая 2018

Когда вы используете 2 <v-flex> компоненты, они оба получают 50% width, хотя похоже, что они выровнены по левому краю, но вход имеет дисплей block, а кнопка имеет дисплей inlineкоторый выглядит как ваш скриншот.

Альтернативой для этого является добавление отзывчивых классов, таких как: 

<v-layout>
  <v-flex xs11>
    <v-text-field
      value="search"
      style="float:left">
    </v-text-field>
  </v-flex>
  <v-flex xs1>
    <v-btn><v-icon>search</v-icon></v-btn>
  </v-flex>
</v-layout>
...