在反应中并排显示两个字段？

Question

我试图使用react中的物化css同时显示两个字段，但没有这样做。一个是我将用来添加联系人的表单，右边的另一个字段将是显示add联系人信息的卡片。我试过用网格，但到目前为止没有运气。有人能帮我吗？

这是表格的代码..。

<div class="row">
   <div class="col s6">
      <section class="section section-login">
         <div class="valign-wrapper row login-box">
            <div class="col card hoverable col card hoverable pull-8">
               <form action="">
                  <div class="card-content">
                     <span class="card-title">Add Contact</span>
                     <div class="row">
                        <div class="input-field col s12">
                           <label for="text">Name</label>
                           <input type="text" class="validate" name="name" id="flname" />
                        </div>
                        <div class="input-field col s12">
                           <label for="email">Email </label>
                           <input type="email" class="validate" name="email" id="email" />
                        </div>
                        <div class="input-field col s12">
                           <label for="text">Phone</label>
                           <input type="text" class="validate" name="phone" id="phone" />
                        </div>
                        <p>
                           <label>
                           <input name="group1" type="radio" checked />
                           <span>Personal</span>
                           </label>
                        </p>
                        <p>
                           <label>
                           <input name="group1" type="radio" />
                           <span>Professional</span>
                           </label>
                        </p>
                     </div>
                  </div>
                  <div class="card-action right-align">
                     <input type="reset" id="reset" class="btn-flat grey-text waves-effect" style={{backgroundColor:'lightgray'}}/>&nbsp;
                     <input type="submit" class="btn teal waves-effect waves-light" value="Add Contact"/>
                  </div>
               </form>
            </div>
         </div>
      </section>
   </div>
</div>

，这里是卡片字段.

<div className="row">
   <div className="col s6 offset-112">
      <div className="card blue-grey darken-1" style={{width: "50%"}}>
      <div class="card-content white-text">
         <span className={'new badge' + (type === 'professional' ? 'new badge red' : 'new badge steelblue')} data-badge-caption="" style={{backgroundColor: "steelblue"}}> {type}</span>
         <span className="card-title">{name}</span>
         <p>Email: {email}</p>
         <p>Phone: {phone}</p>
      </div>
      <div class="card-action">
         <button onclick="" type="button" name="edit" className="btn waves-effect" style={{backgroundColor: "black"}}>Edit</button> &nbsp;
         <button onclick="" type="button" name="delete" className="btn waves-effect" style={{backgroundColor: "indianred"}}>Delete</button> 
      </div>
   </div>
</div>
</div>

Answer 1

你搞得太复杂了。这是要生成两列的标记：

<div class="row">
  <div class="col s12 m6">
    <!-- content -->
  </div>
  <div class="col s12 m6">
    <!-- content -->
  </div>
</div>

s12 =小时占12/12列。

m6 =从中等(601 12宽)起占6/12列。

要在第二列中嵌套内容，只需在第二列中包含一个新行：

<div class="row">
    <div class="col s12">
        <!-- content -->
    </div>
    <div class="col s12">
        <!-- content -->
    </div>
    <div class="col s12">
        <!-- content -->
    </div>
</div>

在第二列中，s12指令相对于它的容器。所以你完全有：

<div class="row">
    <div class="col s12 m6">
        <!-- content -->
    </div>
    <div class="col s12 m6">
        <!-- content -->
        <div class="row">
            <div class="col s12">
               <!-- content -->
            </div>
            <div class="col s12">
               <!-- content -->
            </div>
            <div class="col s12">
               <!-- content -->
            </div>
        </div>
    </div>
</div>

通过使用偏移量，您可以使父列更小--那些将50/50区域从中等以上分隔开的列，例如：

<div class="row">
  <div class="col s12 m4 offset-m2">
    <!-- content -->
  </div>
  <div class="col s12 m4 offset-m2">
    <!-- content -->
  </div>
</div>

https://codepen.io/doughballs/pen/jOrdWLa