css - 在 react 中并排显示两个字段？

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 = 占用介质的 6/12 列(601 像素宽)。

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

<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