Bir web sitesini önyükleme kullanarak 2 sütuna nasıl bölerim?

Question

JSF ile yapılmış bir web sayfasını iki sütun halinde bölmek istiyorum, ancak istediğim gibi görüntülenemediğim için sorun yaşıyorum. Sana sahip olduğum şeyi göstereceğim. Sol bir şeklidir ve doğru bir talimat ve farklı bir formu (Ben ah içeride henüz olmadığını biliyoruz: form) vardır: Gördüğünüz gibi

<h:panelGrid id="panelPpal" columns="2" style="width: 100%"> 
       <h:panelGrid style="width: 100%"> 
        <h:form id="projectForm" class="form-horizontal"> 
         <div class="form-group"> 
          <h:outputLabel id="lblProjectName" 
              value="#{rDisenyo['seccion.crea.nombre']}" 
              for="projectName" 
              class="col-md-3 control-label"/> 
          <div class="col-md-6"> 
           <h:inputText id="projectName" label="Nombre" 
              value="#{newProjectBacking.nombreProyecto}" 
              class="form-control"/> 
          </div> 

         </div> 

         <div class="form-group"> 
          <h:outputLabel for="grosorCristal" value="#{rDisenyo['dialog.avanzadas.grosorCristal']}" 
              class="col-md-3 control-label"/> 
          <div class="col-md-6"> 
           <h:selectOneMenu id="grosorCristal" 
               class="form-control" 
               label="Grosor del Cristal" 
               value="#{newProjectBacking.grosorCristal}" 
               required="true" > 
            <f:selectItem itemLabel="----------" itemValue="0"/> 
            <f:selectItem itemLabel="8 #{rDisenyo['grosor.cristal.milimetro']}" itemValue="8"/> 
            <f:selectItem itemLabel="10 #{rDisenyo['grosor.cristal.milimetro']}" itemValue="10"/> 
            <f:selectItem itemLabel="12 #{rDisenyo['grosor.cristal.milimetro']}" itemValue="12"/> 

           </h:selectOneMenu> 
          </div> 

         </div> 

         <div class="form-group"> 
          <h:outputLabel for="ralMenu" id="ralLbl" 
              value="#{rDisenyo['proyecto.opcionesprevias.ral']}" 
              class="col-md-3 control-label"/> 
          <div class="col-md-6"> 
           <h:selectOneMenu id="ralMenu" class="form-control" 
               value="#{newProjectBacking.ral}" 
               > 
            <f:selectItem itemLabel="" itemValue="0"/> 
            <f:selectItem itemLabel="#{rDisenyo['proyecto.opcionesprevias.ral.blanco']}" itemValue="1"/> 
            <f:selectItem itemLabel="#{rDisenyo['proyecto.opcionesprevias.ral.crudo']}" itemValue="2"/> 
            <f:selectItem itemLabel="#{rDisenyo['proyecto.opcionesprevias.ral.anodizado']}" itemValue="3"/> 
           </h:selectOneMenu> 
          </div> 

         </div> 

        </h:form> 
       </h:panelGrid> 

       <h:panelGrid style="width: 100%"> 
        <div class="col-md-8"> 
         <div class="panel panel-primary"> 
          <div class="panel-heading"> 
           <h3 class="panel-title">#{rDisenyo['instrucciones.title']}</h3> 
          </div> 
          <div class="panel-body"> 
           <div class="subtitulo-instruciones"> 
            #{rDisenyo['instrucciones.angulos.grados']} 
           </div> 

           #{rDisenyo['instrucciones.angulos.linea1']}<br/> 
           #{rDisenyo['instrucciones.angulos.linea2']}<br/> 
           <div class="subtitulo-instruciones"> 
            #{rDisenyo['instrucciones.longitud.title']} 
           </div> 

           #{rDisenyo['instrucciones.longitud.linea1']}<br/> 
           <div class="subtitulo-instruciones"> 
            #{rDisenyo['instrucciones.altura.title']} 
           </div> 

           #{rDisenyo['instrucciones.altura.linea1']}<br/> 
           <div class="subtitulo-instruciones"> 
            #{rDisenyo['instrucciones.recogenizq.title']} 
           </div> 

           #{rDisenyo['instrucciones.recogenizq.linea1']}<br/> 
          </div> 
         </div> 
        </div> 
        <div class="col-md-8"> 
        Eliga el tipo de proyecto: 
        <h:selectOneRadio id="tipoProyectoRadioButton" value="#{newProjectBacking.tipoProyecto}"> 
         <div class="radio"> 
          <f:selectItem itemValue="1" itemLabel="Proyecto A" /> 
         </div> 
         <div class="radio"> 
          <f:selectItem itemValue="2" itemLabel="Proyecto B" /> 
         </div> 
         <div class="radio"> 
          <f:selectItem itemValue="3" itemLabel="Proyecto C" /> 
         </div>  
        </h:selectOneRadio> 
        </div> 
       </h:panelGrid> 


      </h:panelGrid> 

, benim app iki bölümüdür . Pencerenin ortasında doğru panelin başlamasını istiyorum, ama nasıl yapacağımı bilmiyorum. Teşekkür ederim!

Answer 1

Bir çözüm burada buldum: Eğer genelinde 12 ızgaraları toplam yayılabilir böylece How to divide a Twitter bootstrap modal into 2 parts

<div class="modal-body row"> 
    <div class="col-md-6"> 
    <!-- Your first column here --> 
    </div> 
    <div class="col-md-6"> 
    <!-- Your second column here --> 
    </div> 
</div> 

Answer 2

Bootstrap, bir ızgara sistemi üzerinde kurulmaktadır. Bunu düşünmenin en kolay yolu, ekranınızı 4'lük eşit miktarda 4 bölüme ayırır. Toplam sütunlarınız 12'ye kadar çıktığı sürece, ekrana doğru bir şekilde dengelenecek ve görüntülenecektir. Sütunu ortalamak için "metin merkezi" adı verilen önyükleme sınıfını kullanın. Bu, sütun içindeki tüm içeriği 'kendi kendisinde' yapar. Örnek:

<div class = "col-md-6 text-center"> 
    <!-- Content goes here --> 
    </div> 
    <div class = "col-md-6 text-center"> 
     <!-- Content goes here --> 
    </div> 

yukarıdaki iki eşit sütun ve merkezi haline div içinde kapalı tüm içeriği içeriğinizi böler.

Izgara sisteminin daha görsel bir gösterimi için (bunu kontrol etmenizi öneririz), buraya bakın: http://getbootstrap.com/2.3.2/scaffolding.html