bugfix: fix #3576, add max-width

src/components/Login/demo/basic.md

@@ -18,65 +18,94 @@ class LoginDemo extends React.Component {
     notice: '',
     type: 'tab2',
     autoLogin: true,
-  }
+  };
   onSubmit = (err, values) => {
-    console.log('value collected ->', { ...values, autoLogin: this.state.autoLogin });
+    console.log('value collected ->', {
+      ...values,
+      autoLogin: this.state.autoLogin,
+    });
     if (this.state.type === 'tab1') {
-      this.setState({
-        notice: '',
-      }, () => {
-        if (!err && (values.username !== 'admin' || values.password !== '888888')) {
-          setTimeout(() => {
-            this.setState({
-              notice: 'The combination of username and password is incorrect!',
-            });
-          }, 500);
-        }
-      });
+      this.setState(
+        {
+          notice: '',
+        },
+        () => {
+          if (
+            !err &&
+            (values.username !== 'admin' || values.password !== '888888')
+          ) {
+            setTimeout(() => {
+              this.setState({
+                notice:
+                  'The combination of username and password is incorrect!',
+              });
+            }, 500);
+          }
+        },
+      );
     }
-  }
+  };
   onTabChange = (key) => {
     this.setState({
       type: key,
     });
-  }
+  };
   changeAutoLogin = (e) => {
     this.setState({
       autoLogin: e.target.checked,
     });
-  }
+  };
   render() {
     return (
-      <Login
-        defaultActiveKey={this.state.type}
-        onTabChange={this.onTabChange}
-        onSubmit={this.onSubmit}
-      >
-        <Tab key="tab1" tab="Account">
-          {
-            this.state.notice &&
-            <Alert style={{ marginBottom: 24 }} message={this.state.notice} type="error" showIcon closable />
-          }
-          <UserName name="username" />
-          <Password name="password" />
-        </Tab>
-        <Tab key="tab2" tab="Mobile">
-          <Mobile name="mobile" />
-          <Captcha onGetCaptcha={() => console.log('Get captcha!')} name="captcha" />
-        </Tab>
-        <div>
-          <Checkbox checked={this.state.autoLogin} onChange={this.changeAutoLogin}>Keep me logged in</Checkbox>
-          <a style={{ float: 'right' }} href="">Forgot password</a>
-        </div>
-        <Submit>Login</Submit>
-        <div>
-          Other login methods
-          <span className="icon icon-alipay" />
-          <span className="icon icon-taobao" />
-          <span className="icon icon-weibo" />
-          <a style={{ float: 'right' }} href="">Register</a>
-        </div>
-      </Login>
+      <div className="login-warp">
+        <Login
+          defaultActiveKey={this.state.type}
+          onTabChange={this.onTabChange}
+          onSubmit={this.onSubmit}
+        >
+          <Tab key="tab1" tab="Account">
+            {this.state.notice && (
+              <Alert
+                style={{ marginBottom: 24 }}
+                message={this.state.notice}
+                type="error"
+                showIcon
+                closable
+              />
+            )}
+            <UserName name="username" />
+            <Password name="password" />
+          </Tab>
+          <Tab key="tab2" tab="Mobile">
+            <Mobile name="mobile" />
+            <Captcha
+              onGetCaptcha={() => console.log('Get captcha!')}
+              name="captcha"
+            />
+          </Tab>
+          <div>
+            <Checkbox
+              checked={this.state.autoLogin}
+              onChange={this.changeAutoLogin}
+            >
+              Keep me logged in
+            </Checkbox>
+            <a style={{ float: 'right' }} href="">
+              Forgot password
+            </a>
+          </div>
+          <Submit>Login</Submit>
+          <div>
+            Other login methods
+            <span className="icon icon-alipay" />
+            <span className="icon icon-taobao" />
+            <span className="icon icon-weibo" />
+            <a style={{ float: 'right' }} href="">
+              Register
+            </a>
+          </div>
+        </Login>
+      </div>
     );
   }
 }
@@ -85,6 +114,10 @@ ReactDOM.render(<LoginDemo />, mountNode);
 ````
 
 <style>
+#scaffold-src-components-Login-demo-basic .login-warp{
+  max-width: 360px;
+  margin: auto;
+}
 #scaffold-src-components-Login-demo-basic .icon {
   display: inline-block;
   width: 24px;