mardi 16 octobre 2018

How to have several buttons next to each other in a single row in Vuetify

I have six buttons in two groups of three. But I want them all to be in the same group.

Here is my code:

<v-layout>
    <v-flex xs12>
      <v-card
        class="mb-5 "
        height="200px"
        color="grey lighten-4"
        light
      >

        <div class="rackType">
          <v-flex xs12 sm6 offset-sm3>
            <strong>Select the item you want to add to the rack.</strong>

            <v-spacer></v-spacer>
            <v-container
              fluid
              grid-list-lg
            >
            <v-layout row wrap>
              <v-flex xs12 class="text-sm-left mt-3">
              <v-btn span="activator" outline @click="" large bottom color="blue darken-3" class="mt-5" >Good Subrack</v-btn>
              <v-btn span="activator" outline @click="" large bottom color="blue darken-3" class="mt-5" >Good Subrack</v-btn>
              <v-btn span="activator" outline @click="" large bottom color="blue darken-3" class="mt-5" >Good Subrack</v-btn>
              <v-btn span="activator" outline @click="" large bottom color="blue darken-3" class="mt-5" >Good Subrack</v-btn>
              <v-btn span="activator" outline @click="" large bottom color="blue darken-3" class="mt-5" >Good Subrack</v-btn>
              <v-btn span="activator" outline @click="" large bottom color="blue darken-3" class="mt-5" >Good Subrack</v-btn>
              </v-flex>
            </v-layout>
            </v-container>

          </v-flex>
        </div>
      </v-card>
    </v-flex>
  </v-layout>

So right now the first three buttons are in one row and then the next three buttons are in another row under the first row. I want to have all of them on the same row meaning one row of six buttons. What's the best way to do this?




Aucun commentaire:

Enregistrer un commentaire