feat: support cols equals '1'

components/layout/index.md

@@ -106,17 +106,20 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 | pull     | 栅格向左移动格数   | number | 0        |
 
 <style>
-.demo-row {
+.markdown .demo-row,
+.code-box-demo .demo-row {
     background-image: linear-gradient(90deg, #F5F5F5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #F5F5F5 8.33333333%, #F5F5F5 12.5%,  transparent 12.5%, transparent 16.66666667%, #F5F5F5 16.66666667%, #F5F5F5 20.83333333%, transparent 20.83333333%, transparent 25%, #F5F5F5 25%, #F5F5F5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #F5F5F5 33.33333333%, #F5F5F5 37.5%, transparent 37.5%, transparent 41.66666667%, #F5F5F5 41.66666667%, #F5F5F5 45.83333333%, transparent 45.83333333%, transparent 50%, #F5F5F5 50%, #F5F5F5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #F5F5F5 58.33333333%, #F5F5F5 62.5%, transparent 62.5%, transparent 66.66666667%, #F5F5F5 66.66666667%, #F5F5F5 70.83333333%,  transparent 70.83333333%, transparent 75%, #F5F5F5 75%, #F5F5F5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #F5F5F5 83.33333333%, #F5F5F5 87.5%, transparent 87.5%, transparent 91.66666667%, #F5F5F5 91.66666667%, #F5F5F5 95.83333333%, transparent 95.83333333%);
     overflow: hidden;
 }
-
-.row-flex {
+.markdown .row-flex,
+.code-box-demo .row-flex {
   background: #F5F5F5;
 }
 
-.row > div,
-.row-flex > div {
+.markdown .row div,
+.code-box-demo .row div,
+.markdown .row-flex div,
+.code-box-demo .row-flex div {
   padding: 5px 0;
   text-align: center;
   border-radius: 6px;
@@ -128,7 +131,8 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
   color: #fff;
 }
 
-.row .demo-col {
+.markdown .row .demo-col,
+.code-box-demo .row .demo-col {
   text-align: center;
   padding: 40px 0;
   color: #fff;
@@ -137,34 +141,43 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
   margin-top: 0;
   margin-bottom: 0;
 }
-.row .demo-col-1 {
+.markdown .row .demo-col-1,
+.code-box-demo .row .demo-col-1 {
   background: rgba(29, 128, 211, 0.7);
 }
-.row .demo-col-2 {
+.markdown .row .demo-col-2,
+.code-box-demo .row .demo-col-2 {
   background: rgba(29, 128, 211, 0.5);
 }
-.row .demo-col-3 {
+.markdown .row .demo-col-3,
+.code-box-demo .row .demo-col-3{
   background: rgba(255, 255, 255, 0.2);
   color: #999;
 }
-.row .demo-col-4 {
+.markdown .row .demo-col-4,
+.code-box-demo .row .demo-col-4 {
   background: rgba(29, 128, 211, 0.6);
 }
-.row .demo-col-5 {
+.markdown .row .demo-col-5,
+.code-box-demo .row .demo-col-5 {
   background: rgba(255, 255, 255, 0.5);
   color: #999;
 }
 
-.hight-100 {
+.markdown .hight-100,
+.code-box-demo .hight-100 {
   height: 100px;
 }
-.hight-50 {
+.markdown .hight-50,
+.code-box-demo .hight-50 {
   height: 50px;
 }
-.hight-120 {
+.markdown .hight-120,
+.code-box-demo .hight-120 {
   height: 120px;
 }
-.hight-80 {
+.markdown .hight-80,
+.code-box-demo .hight-80 {
   height: 80px;
 }
 </style>

site/component/ComponentDoc/index.jsx

@@ -6,11 +6,12 @@ import * as utils from '../utils';
 export default class ComponentDoc extends React.Component {
   render() {
     const { demos = [], doc } = this.props;
+    const isSingleCol = doc.meta.cols === '1';
 
     const leftChildren = [];
     const rightChildren = [];
     demos.forEach((demoData, index) => {
-      if (index % 2 === 0) {
+      if (index % 2 === 0 || isSingleCol) {
         leftChildren.push(<Demo {...demoData} key={index} />);
       } else {
         rightChildren.push(<Demo {...demoData} key={index} />);
@@ -18,16 +19,20 @@ export default class ComponentDoc extends React.Component {
     });
 
     return (
+      <div>
         <section className="markdown">
           <h1>{doc.meta.title}</h1>
           { doc.description.map(utils.objectToComponent) }
           <h2>代码演示</h2>
+        </section>
         <Row>
-          <Col span="12">{ leftChildren }</Col>
-          <Col span="12">{ rightChildren }</Col>
+          <Col span={ isSingleCol ? '24' : '12' }>{ leftChildren }</Col>
+          { isSingleCol ? null : <Col span="12">{ rightChildren }</Col> }
         </Row>
+        <section className="markdown">
           { doc.api.map(utils.objectToComponent) }
         </section>
+      </div>
     );
   }
 }