Question

您好我正在使用语义ui开展项目。我有一个表格，如下：

<div class="content">
  <div class="ui main container">
    <div class="ui form">
    <div class="one field">
      <div class="field">
        <label>Email</label>
        <div class="one field">
          <div class="field">
            <input type="text">
          </div>
        </div>
      </div>
      <div class="field">
        <label>Address</label>
         <div class="three fields">
          <div class="field">
            <input type="text">
          </div>
           <div class="field">
            <input type="text">
          </div>
           <div class="field">
            <input type="text">
          </div>
      </div>
    </div>
  </div>
</div>

但是我不希望表格像全宽，我希望它是6列宽，但仍然居中，我不知道如何去做。任何帮助都会很棒。

Answer 1

添加到您的form-div类six wide column centered并使用div ui grid包装它：

<div class="content">
  <div class="ui main container">
    <div class="ui grid">
    <div class="ui form six wide column centered">
    <div class="one field">
      <div class="field">
        <label>Email</label>
        <div class="one field">
          <div class="field">
            <input type="text">
          </div>
        </div>
      </div>
      <div class="field">
        <label>Address</label>
         <div class="three fields">
          <div class="field">
            <input type="text">
          </div>
           <div class="field">
            <input type="text">
          </div>
           <div class="field">
            <input type="text">
          </div>
      </div>
    </div>
  </div>
</div>
</div>

请参阅jsfiddle

详细了解网格系统here

Answer 2

要更改字段的大小，可以简单地将其放在类名称为<size> wide field的除法标记中

示例：

<form class = "ui form" action = "">
  <div class="three wide field">
    <input type = "text" name = "firstname">
  </div>
  <div class = "field">
    <input type = "submit" value = "submit>
  </div>
</form>

Click here for more details

改变形式语义ui的宽度

2 个答案: