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

Question

我试图在 react 中使用 materialize css 并排显示两个字段，但没有这样做。一个是我将用来添加联系人的表单，右侧的另一个字段将是显示添加联系人信息的卡片。我尝试使用网格，但到目前为止没有运气。任何人都可以帮我这样做吗？

这是表单的代码...

<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 = 从中等（601px 宽）中占据 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