javascript - 在列 Flex 组件之间提供边距/间隙

Question

我试图在 UI 中的按钮（重置过滤器/应用过滤器/保存和应用过滤器）之间提供一些边距，我使用 flex 来对齐按钮，但我无法在按钮之间提供一些边距/间隙。知道怎么做

代码 ：

<div class="d-flex flex-column justify-space-around">
    <v-btn
        text
        style="margin-left: 30px"
        color="primary"
        @click="resetFilter()">
        Reset Filter
    </v-btn>
    <v-btn
        v-if="!updatingSavedFilter"
        color="primary"
        @click="
        applyFilter()
        filterDropdownOpen = false">
        Apply Filter
    </v-btn>
    <v-btn
        color="primary"
        @click="
        validateAndSaveFilter()    
        filterDropdownOpen = "false">
        Save &amp; Apply Filter
    </v-btn>
</div>

标签： javascriptcssvue.jsflexbox

Answer 1

看来您正在使用 Vuetify，对吗？在这种情况下，您可以为每个按钮添加一个边距类：

<v-btn
   text
   style="margin-left: 30px"
   color="primary"
   class="mb-2"
   @click="resetFilter"
>
   Reset Filter
</v-btn>

请参阅 Vuetify 的间距文档。

关于另一个主题：尽量避免内联样式。最好加一个类。在这种情况下，你可以有类似的东西

class="mb-2 ml-7"

这将在底部为您提供 8px 的边距，在左侧为您提供 28px 的边距。

此外，将函数名称传递给@click 时，不要执行它，只传递名称（参见我上面的示例）。