Vuejs2 对齐带图标和不带图标的vue组件

我正在设计一个带有下拉列表的表单。我在开始时间附近放了一个图标。对于大屏幕，开始时间和结束时间在同一行上；对于移动设备，开始时间和结束时间在两行上。但是，部件排列不正确。对于移动设备，我希望“结束时间”下拉列表、“持续时间”和“保存”按钮分别位于各自的行中，并且位于开始时间下拉列表的下方（并与之齐平），而不是位于开始时间图标的下方。 对于大屏幕，我希望“持续时间”和“保存”按钮与“开始时间”下拉列表对齐，而不是与图标对齐

感谢您的帮助。下面是代码和屏幕截图

App.vue：

<template>
<div id="app">

<v-app id="inspire"> 

<Header/> 
<v-content>
<v-container fluid>
  <router-view></router-view>
</v-container>
</v-content>



 </v-app> 
 </div>
</template>

Session.vue：

      <template>
      <div id = 'newSession'> 


        <v-layout align-center justify-center >
      <v-flex xs18 sm10 md8>



      <div>
          <fieldset> 
              <legend align="left">Add New Session</legend> 

            <v-alert
              :value="invalidStartTimeorEndTime"
              type="warning"  
            >
              Start Time or End Time is invalid.
            </v-alert>


      <form @submit.prevent="submit">

            <v-layout row align-baseline>

            <!--menu allows the date-picker to show and not show -->
            <v-menu   
              ref="menu2"
              :close-on-content-click="false"
              v-model="menu2"
              :nudge-right="40"
              :return-value.sync="date"
              lazy
              transition="scale-transition"
              offset-y
              full-width
              min-width="290px"
            > 
              <v-text-field
                slot="activator"
                v-model="date"
                label="Session Date"
                prepend-icon="event"
                box
                readonly

              ></v-text-field>

            <v-date-picker v-model="date" @input="$refs.menu2.save(date)"  ></v-date-picker>

          </v-menu> 

          <label  color="indigo" background-color= "indigo" text-color="white"> {{getWeekendDate}} </label> <!-- colors x working -->

          </v-layout>


          <v-layout v-bind="binding">        

              <!-- <v-layout row> -->
              <!-- <v-icon>access_time</v-icon> -->


              <v-select
                :items="times"
                v-model="start_time"
                label="Start Time"
                prepend-icon="access_time"
                box
                placeholder="Start Time"
                ></v-select>


              <v-select
                :items="times"
                :value="getEndTime"
                label="End Time"
                box
                placeholder="End Time"
                @change="changeEndTime"          
              ></v-select>

              </v-layout>

              <v-layout column align-left >


                <div class="flex">

              <label>{{getDuration}}</label>

              <v-btn color="indigo" type ="submit" dark>Save</v-btn>

              </div>

              </v-layout>




      </form>

          </fieldset>
          </div>


          </v-flex>
        </v-layout>

      </div>

      </template>

添加新会话
开始时间或结束时间无效。
{{getWeekendDate}}
{{getDuration}}
拯救

---

我想你可以通过放置

前置图标=“

”来伪装它，不确定这是否会有任何副作用？@Traxo-谢谢！结束时间现在已对齐！持续时间标签和保存按钮仍然没有完全对齐。您可以根据自己的喜好通过CSS进行调整。您还可以将其包装在

和类似

ml-4

的margin类中，就像@gil一样-谢谢！页边距类有助于

持续时间

和

保存按钮

——更加一致。

没有帮助-只是让下拉列表看起来很奇怪。