docs: use a-space replace br in demo (#6861)

Author: kovsu

components/badge/demo/ribbon.vue

@@ -16,28 +16,30 @@ Use ribbon badge.
 </docs>
 
 <template>
-  <a-badge-ribbon text="Hippies">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
-  <a-badge-ribbon text="Hippies" color="pink">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
-  <a-badge-ribbon text="Hippies" color="red">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
-  <a-badge-ribbon text="Hippies" color="cyan">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
-  <a-badge-ribbon text="Hippies" color="green">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
-  <a-badge-ribbon text="Hippies" color="purple">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
-  <a-badge-ribbon text="Hippies" color="volcano">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
-  <a-badge-ribbon text="Hippies" color="magenta">
-    <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
-  </a-badge-ribbon>
+  <a-space direction="vertical" style="width: 100%">
+    <a-badge-ribbon text="Hippies">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+    <a-badge-ribbon text="Hippies" color="pink">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+    <a-badge-ribbon text="Hippies" color="red">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+    <a-badge-ribbon text="Hippies" color="cyan">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+    <a-badge-ribbon text="Hippies" color="green">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+    <a-badge-ribbon text="Hippies" color="purple">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+    <a-badge-ribbon text="Hippies" color="volcano">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+    <a-badge-ribbon text="Hippies" color="magenta">
+      <a-card title="Pushes open the window" size="small">and raises the spyglass.</a-card>
+    </a-badge-ribbon>
+  </a-space>
 </template>

components/badge/demo/status.vue

@@ -1,7 +1,7 @@
 <docs>
 ---
 order: 4
-title: 
+title:
   zh-CN: 状态点
   en-US: Status
 ---
@@ -22,13 +22,12 @@ Standalone badge with status.
   <a-badge status="processing" />
   <a-badge status="warning" />
   <br />
-  <a-badge status="success" text="Success" />
-  <br />
-  <a-badge status="error" text="Error" />
-  <br />
-  <a-badge status="default" text="Default" />
-  <br />
-  <a-badge status="processing" text="Processing" />
-  <br />
-  <a-badge status="warning" text="warning" />
+
+  <a-space direction="vertical">
+    <a-badge status="success" text="Success" />
+    <a-badge status="error" text="Error" />
+    <a-badge status="default" text="Default" />
+    <a-badge status="processing" text="Processing" />
+    <a-badge status="warning" text="warning" />
+  </a-space>
 </template>