25 lines
662 B
Vue
25 lines
662 B
Vue
<script setup lang="ts">
|
||
// wrap=false：不换行，超出部分会被挤压（配合 flex 使用）
|
||
import { G3Col, G3Row } from '@g3soft/ui'
|
||
</script>
|
||
|
||
<template>
|
||
<G3Row :gutter="12" :wrap="false">
|
||
<G3Col :span="8"><div class="cell">span 8</div></G3Col>
|
||
<G3Col :span="8"><div class="cell">span 8</div></G3Col>
|
||
<G3Col :span="8"><div class="cell">span 8</div></G3Col>
|
||
<G3Col :span="8"><div class="cell">超出 24，但不换行</div></G3Col>
|
||
</G3Row>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.cell {
|
||
padding: 12px 0;
|
||
border-radius: 6px;
|
||
background: rgba(24, 24, 27, 0.04);
|
||
font-size: 13px;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
}
|
||
</style>
|