bugfix: fix #3576, add max-width

src/components/Login/demo/basic.md

@@ -18,55 +18,81 @@ 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({
+      this.setState(
+        {
           notice: '',
-      }, () => {
-        if (!err && (values.username !== 'admin' || values.password !== '888888')) {
+        },
+        () => {
+          if (
+            !err &&
+            (values.username !== 'admin' || values.password !== '888888')
+          ) {
             setTimeout(() => {
               this.setState({
-              notice: 'The combination of username and password is incorrect!',
+                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 (
+      <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 />
-          }
+            {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" />
+            <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>
+            <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>
@@ -74,9 +100,12 @@ class LoginDemo extends React.Component {
             <span className="icon icon-alipay" />
             <span className="icon icon-taobao" />
             <span className="icon icon-weibo" />
-          <a style={{ float: 'right' }} href="">Register</a>
+            <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;