React语义ui多列多行表单

Question

我需要创建多列，多行表单。我正在考虑使用网格或表格方法。哪种方法会更好？为什么？还有其他方法吗？

谢谢！

Answer 1

我为这项工作所做的是为第一个Codepen使用3列。第二个Codepen是使用2列。您可以在示例中看到。看看哪个更适合你。

我更喜欢使用网格进行响应式设计。该表仅限于此方面。

The 3 columns

<h2>Ban profile</h2>
    <div class="ui stackable grid">
      <div class="two wide column">
        <img class="ui small bordered image" src="https://s9.postimg.cc/xkxqxrl5r/IMG_20170921_175941.jpg">
      </div>
      <div class="six wide column">
        <form name="UserForm" class="ui form aligned">
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
      </div>
      <div class="one wide column"></div>
      <div class="six wide column">
        <div class="ui form aligned">
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
          <div class="field">
            <label>First name</label>
            <input type="text" placeholder="First Name">
          </div>
        </div>
      </div>
    </div>
    <button class="ui primary button">
     edit
    </button>
    </div>
    </div>
    </div>

    <div class="ui container">
      <div class="ui basic clearing segment">
        <p>You've done ? click to save</p>
        <button class="ui right floated primary button"> Save</button>
      </div>
    </div>

The 2 columns