Question

我正在对话框中制作表格。我试图使一个v文本字段占据容器的整个宽度。但是它并没有占据整个宽度。

我尝试将xs12分配给lg12。我尝试了全角指令。

这是我的代码：

<v-dialog v-model="dialog" max-width="878px">
     <template v-slot:activator="{ on }">
            <v-btn color="primary" dark class="mb-2" v-on="on">
              <span id="two">
                <img id="plus" src="../assets/plus-symbol.svg">
                <span id="addapp">Add Application</span>
              </span>

            </v-btn>
          </template>
          <v-card style="border-radius:20px 20px 0 0;">
            <v-card-title>
              <span class="headline" id="frmttl">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>

              <v-container fluid grid-list-md>
                <v-layout row wrap style="margin-left:-600px; height: 314px; width:878px;">


                  <v-flex xs12 sm12 md12 lg12 xl12 >
                    <v-text-field v-model="editedItem.ApplicationName" single-line outline full-width placeholder="New Application Name"></v-text-field>
                  </v-flex>
                </v-layout>
              </v-container>

            </v-card-text>

            <v-card-actions id="crdactns">
              <v-spacer></v-spacer>
              <v-btn id="closbtn" flat @click="close">Close</v-btn>

              <v-btn id="savebtn" flat @click="save">{{ CreateOrSave }}</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>

我希望v文本框占据对话框的整个宽度。但实际上，它仅占据左侧空间的一半。

Answer 1

Codepen：https://codepen.io/anon/pen/dLoNeO

删除"margin-left:-600px; height: 314px; width:878px;行。会很好的工作。检查并正常工作

v-text-field没有占据容器的整个宽度

1 个答案: