adjust col & row

src/client/js/components/Admin/Customize/Customize.jsx

@@ -16,10 +16,10 @@ class Customize extends React.Component {
 
     return (
       <Fragment>
-        <div className="row my-3">
+        <div className="my-3">
           <CustomizeLayoutSetting />
         </div>
-        <div className="row my-3">
+        <div className="my-3">
           <CustomizeBehaviorSetting />
         </div>
         <legend>{t('customize_page.Function')}</legend>

src/client/js/components/Admin/Customize/CustomizeBehaviorOption.jsx

@@ -7,7 +7,7 @@ class CustomizeBehaviorOption extends React.PureComponent {
   render() {
 
     return (
-      <div className="col-xs-6">
+      <React.Fragment>
         <h4>
           <div className="radio radio-primary">
             <input type="radio" id={`radioBehavior${this.props.behaviorType}`} checked={this.props.isSelected} onChange={this.props.onSelected} />
@@ -19,7 +19,7 @@ class CustomizeBehaviorOption extends React.PureComponent {
         </h4>
         {/* render layout description */}
         {this.props.children}
-      </div>
+      </React.Fragment>
     );
   }
 

src/client/js/components/Admin/Customize/CustomizeBehaviorSetting.jsx

@@ -42,37 +42,43 @@ class CustomizeBehaviorSetting extends React.Component {
     return (
       <React.Fragment>
         <h2>{t('customize_page.Behavior')}</h2>
-        <CustomizeBehaviorOption
-          behaviorType="growi"
-          isSelected={adminCustomizeContainer.state.currentBehavior === 'growi'}
-          onSelected={() => adminCustomizeContainer.switchBehaviorType('growi')}
-          labelHtml='GROWI Simplified Behavior <small class="text-success">(Recommended)</small>'
-        >
-          {/* TODO i18n */}
-          <ul>
-            <li>Both of <code>/page</code> and <code>/page/</code> shows the same page</li>
-            <li><code>/nonexistent_page</code> shows editing form</li>
-            <li>All pages shows the list of sub pages <b>if using GROWI Enhanced Layout</b></li>
-          </ul>
-        </CustomizeBehaviorOption>
-
-        <CustomizeBehaviorOption
-          behaviorType="crowi-plus"
-          isSelected={adminCustomizeContainer.state.currentBehavior === 'crowi-plus'}
-          onSelected={() => adminCustomizeContainer.switchBehaviorType('crowi-plus')}
-          labelHtml="Crowi Classic Behavior"
-        >
-          {/* TODO i18n */}
-          <ul>
-            <li><code>/page</code> shows the page</li>
-            <li><code>/page/</code> shows the list of sub pages</li>
-            <ul>
-              <li>If portal is applied to <code>/page/</code> , the portal and the list of sub pages are shown</li>
-            </ul>
-            <li><code>/nonexistent_page</code> shows editing form</li>
-            <li><code>/nonexistent_page/</code> the list of sub pages</li>
-          </ul>
-        </CustomizeBehaviorOption>
+        <div className="row">
+          <div className="col-xs-6">
+            <CustomizeBehaviorOption
+              behaviorType="growi"
+              isSelected={adminCustomizeContainer.state.currentBehavior === 'growi'}
+              onSelected={() => adminCustomizeContainer.switchBehaviorType('growi')}
+              labelHtml='GROWI Simplified Behavior <small class="text-success">(Recommended)</small>'
+            >
+              {/* TODO i18n */}
+              <ul>
+                <li>Both of <code>/page</code> and <code>/page/</code> shows the same page</li>
+                <li><code>/nonexistent_page</code> shows editing form</li>
+                <li>All pages shows the list of sub pages <b>if using GROWI Enhanced Layout</b></li>
+              </ul>
+            </CustomizeBehaviorOption>
+          </div>
+
+          <div className="col-xs-6">
+            <CustomizeBehaviorOption
+              behaviorType="crowi-plus"
+              isSelected={adminCustomizeContainer.state.currentBehavior === 'crowi-plus'}
+              onSelected={() => adminCustomizeContainer.switchBehaviorType('crowi-plus')}
+              labelHtml="Crowi Classic Behavior"
+            >
+              {/* TODO i18n */}
+              <ul>
+                <li><code>/page</code> shows the page</li>
+                <li><code>/page/</code> shows the list of sub pages</li>
+                <ul>
+                  <li>If portal is applied to <code>/page/</code> , the portal and the list of sub pages are shown</li>
+                </ul>
+                <li><code>/nonexistent_page</code> shows editing form</li>
+                <li><code>/nonexistent_page/</code> the list of sub pages</li>
+              </ul>
+            </CustomizeBehaviorOption>
+          </div>
+        </div>
 
         <AdminUpdateButtonRow onClick={this.onClickSubmit} />
       </React.Fragment>

src/client/js/components/Admin/Customize/CustomizeLayoutOption.jsx

@@ -8,7 +8,7 @@ class CustomizeLayoutOption extends React.Component {
     const { layoutType } = this.props;
 
     return (
-      <div className="col-sm-4">
+      <React.Fragment>
         <h4>
           <div className="radio radio-primary">
             <input type="radio" id={`radio-layout-${layoutType}`} checked={this.props.isSelected} onChange={this.props.onSelected} />
@@ -23,7 +23,7 @@ class CustomizeLayoutOption extends React.Component {
         </a>
         {/* render layout description */}
         {this.props.children}
-      </div>
+      </React.Fragment>
     );
   }
 

src/client/js/components/Admin/Customize/CustomizeLayoutOptions.jsx

@@ -15,50 +15,56 @@ class CustomizeLayoutOptions extends React.Component {
 
     return (
       <React.Fragment>
-        <CustomizeLayoutOption
-          layoutType="crowi-plus"
-          isSelected={adminCustomizeContainer.state.currentLayout === 'growi'}
-          onSelected={() => adminCustomizeContainer.switchLayoutType('growi')}
-          labelHtml={'GROWI Enhanced Layout <small class="text-success">(Recommended)</small>'}
-        >
-          {/* TODO i18n */}
-          <h4>Simple and Clear</h4>
-          <ul>
-            <li>Full screen layout and thin margins/paddings</li>
-            <li>Show and post comments at the bottom of the page</li>
-            <li>Affix Table-of-contents</li>
-          </ul>
-        </CustomizeLayoutOption>
+        <div className="col-sm-4">
+          <CustomizeLayoutOption
+            layoutType="crowi-plus"
+            isSelected={adminCustomizeContainer.state.currentLayout === 'growi'}
+            onSelected={() => adminCustomizeContainer.switchLayoutType('growi')}
+            labelHtml={'GROWI Enhanced Layout <small class="text-success">(Recommended)</small>'}
+          >
+            {/* TODO i18n */}
+            <h4>Simple and Clear</h4>
+            <ul>
+              <li>Full screen layout and thin margins/paddings</li>
+              <li>Show and post comments at the bottom of the page</li>
+              <li>Affix Table-of-contents</li>
+            </ul>
+          </CustomizeLayoutOption>
+        </div>
 
-        <CustomizeLayoutOption
-          layoutType="kibela"
-          isSelected={adminCustomizeContainer.state.currentLayout === 'kibela'}
-          onSelected={() => adminCustomizeContainer.switchLayoutType('kibela')}
-          labelHtml="Kibela Like Layout"
-        >
-          {/* TODO i18n */}
-          <h4>Easy Viewing Structure</h4>
-          <ul>
-            <li>Center aligned contents</li>
-            <li>Show and post comments at the bottom of the page</li>
-            <li>Affix Table-of-contents</li>
-          </ul>
-        </CustomizeLayoutOption>
+        <div className="col-sm-4">
+          <CustomizeLayoutOption
+            layoutType="kibela"
+            isSelected={adminCustomizeContainer.state.currentLayout === 'kibela'}
+            onSelected={() => adminCustomizeContainer.switchLayoutType('kibela')}
+            labelHtml="Kibela Like Layout"
+          >
+            {/* TODO i18n */}
+            <h4>Easy Viewing Structure</h4>
+            <ul>
+              <li>Center aligned contents</li>
+              <li>Show and post comments at the bottom of the page</li>
+              <li>Affix Table-of-contents</li>
+            </ul>
+          </CustomizeLayoutOption>
+        </div>
 
-        <CustomizeLayoutOption
-          layoutType="classic"
-          isSelected={adminCustomizeContainer.state.currentLayout === 'crowi'}
-          onSelected={() => adminCustomizeContainer.switchLayoutType('crowi')}
-          labelHtml="Crowi Classic Layout"
-        >
-          {/* TODO i18n */}
-          <h4>Separated Functions</h4>
-          <ul>
-            <li>Collapsible Sidebar</li>
-            <li>Show and post comments in Sidebar</li>
-            <li>Collapsible Table-of-contents</li>
-          </ul>
-        </CustomizeLayoutOption>
+        <div className="col-sm-4">
+          <CustomizeLayoutOption
+            layoutType="classic"
+            isSelected={adminCustomizeContainer.state.currentLayout === 'crowi'}
+            onSelected={() => adminCustomizeContainer.switchLayoutType('crowi')}
+            labelHtml="Crowi Classic Layout"
+          >
+            {/* TODO i18n */}
+            <h4>Separated Functions</h4>
+            <ul>
+              <li>Collapsible Sidebar</li>
+              <li>Show and post comments in Sidebar</li>
+              <li>Collapsible Table-of-contents</li>
+            </ul>
+          </CustomizeLayoutOption>
+        </div>
       </React.Fragment>
     );
   }