css - Semantic-UI 字段底部边距在宽屏幕中被破坏

Question

我有一个包含一些字段的表单。当我调整浏览器窗口大小时，字段之间的距离被打破了。我不知道如何保持始终相同的字段之间的距离。如果您访问下面的链接，您可以看到它发生在 3、4、5 字段中以调整结果窗口的大小:

http://jsfiddle.net/Lj3w4z3m/1/

<div class='ui form '>
<div class='fields'>
    <div class='eight wide field'>
        <label>field 1</label>
        <input name='Status' type='text' value='Enviado para a junta' readonly='readonly'>
    </div>
    <div class='eight wide field'>
        <label>field 2</label>
        <input name='ProximoStatus' type='text' value='Retorno da junta' readonly='readonly'>
    </div>
</div>
<div class='fields'>
    <div class='sixteen wide field'>
        <label>field 3</label>
        <input name='Observacao' type='text' value=''>
    </div>
</div>
<div class='fields'>
    <div class='sixteen wide field'>
        <label>field 4</label>
        <input name='Observacao' type='text' value=''>
    </div>
</div>
<div class='fields'>
    <div class='sixteen wide field'>
        <label>field 5</label>
        <input name='Observacao' type='text' value=''>
    </div>
</div>

非常感谢。

Answer 1

我已经更新了 fiddle 。请检查一下。我认为这会解决您的问题。

<div class='ui form '>
<div class='fields'>
<div class='eight wide field'>
<label>field 1</label>
<input name='Status' type='text' value='Enviado para a junta' readonly='readonly'>
</div>
<div class='eight wide field'>
<label>field 2</label>
<input name='ProximoStatus' type='text' value='Retorno da junta' readonly='readonly'>
</div>
<div class='sixteen wide field'>
<label>field 3</label>
<input name='Observacao' type='text' value=''>
</div>
<div class='sixteen wide field'>
<label>field 4</label>
<input name='Observacao' type='text' value=''>
</div>
<div class='sixteen wide field'>
<label>field 5</label>
<input name='Observacao' type='text' value=''>
</div>
</div>
</div>