Changer la largeur de la forme sémantique ui

Question

Salut Je travaille sur un projet en utilisant l'interface utilisateur sémantique. J'ai une forme, comme suit:

http://jsfiddle.net/5dyzpt77/

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

Cependant, je ne veux pas que la forme soit pleine largeur comme il est, je voudrais qu'il soit 6 colonnes de large, mais toujours centrée , et je ne suis pas sûr de savoir comment y arriver. Toute aide est la bienvenue.

Answer 1

Ajouter à votre classe forme div six wide column centered et l'envelopper avec div avec classe 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> 

Voir jsfiddle

En savoir plus sur le système de grille here