如何将 v-btn 与 v-expansion-panels 放在同一行？答案

【问题标题】：How to put a v-btn in the same row as v-expansion-panels?如何将 v-btn 与 v-expansion-panels 放在同一行？
【发布时间】：2020-07-27 01:28:30
【问题描述】：

我在对齐布局时遇到了一些问题。这个想法是在同一行中有一组v-expansion-panels 和v-btn，并让它们在一张卡片中视觉居中。我几乎在这个 codepen 中实现了它：https://codepen.io/anzuj/pen/PoPPbdw 使用这种结构：

      row
      / \
    col  col
 (panel) (btn)

问题：v-col 的最小宽度在按钮周围创建了一个空白，使卡片内容在视觉上偏离中心。希望能得到一些帮助：

使v-btn 周围的v-col 与v-btn 的宽度相同
解决没有网格系统的布局

非常感谢任何思考的人！

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

你所做的一切都是对的，你只需要在<v-card-text> 内扭曲<v-container> 以便它得到正确的对齐。此外，右侧的按钮不需要具有 col-2 宽度，它只需要 col-1 宽度。由于您没有为包裹按钮的 col 提供任何宽度，因此它占用了整个空间，因此也占用了容器。另一种选择是使用 css 设置容器的宽度，例如：<v-container style="width:600px;">

<v-card color="grey lighten-3">
  <v-card-text>
    Problem: v-col with the <v-icon color="green">mdi-check</v-icon>button has min col width that off-centers the general look. How can the margins on left and right be visually equal? 

   <v-container> //Either give a width here style="width:600px;"
      <v-row v-for="(item,i) in 5"
        :key="i" class="mb-1" no-gutters justify="center">
        <v-col cols="10">
          <v-expansion-panels>
            <v-expansion-panel>
              <v-expansion-panel-header>Item</v-expansion-panel-header>
              <v-expansion-panel-content>
                  Lorem ipsum dolor sit amet
               </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-col>
        <v-col> //or set cols="1" here
         <v-btn class="closeBtn mb-1 ml-1" width="36px">
           <v-icon color="green">mdi-check</v-icon>
         </v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-card-text>
 </v-card>

【讨论】：

感谢您的思考！它实际上似乎可以解决问题。你认为这是一个可行的解决方案吗？ codepen.io/anzuj/pen/KKddyzy
是的，这是按钮实际需要的宽度，这有助于其他列缩放和利用可用空间的重置。 :D

【解决方案2】：

通过计算带有按钮的v-col 需要多少宽度并在 v-for 循环中应用内联样式来修复它：<v-col cols="1" style="max-width:40px">。编辑笔：https://codepen.io/anzuj/pen/KKddyzy

【讨论】：