语义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

我已经更新了小提琴。请检查一下。我认为这会解决你的问题。

<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>