Come dividere un web in 2 colonne usando bootstrap?

Question

Voglio dividere una pagina web creata con JSF in due colonne, ma sto avendo problemi perché non è visualizzata come voglio. Ti mostrerò quello che ho.

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

Come si può vedere, ci sono due parti nel mio app: quello di sinistra è una forma e quello di destra ha le istruzioni e una forma diversa (lo so che non è ancora all'interno ah: modulo) . Voglio che il pannello giusto inizi nel centro della finestra, ma non so come farlo. Grazie!

Answer 1

ho trovato una soluzione qui: 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 è impostato su un sistema a griglia, in modo da poter abbracciare un totale di 12 reti in tutto. Il modo più semplice per pensarci è dividere il tuo schermo in 3 sezioni di uguale quantità di 4 in tutto. Finché le colonne totali si aggiungono a 12, verranno bilanciate e visualizzate correttamente sullo schermo. Per centrare la colonna, usa la classe bootstrap chiamata "text-center". Ciò rende tutto il contenuto all'interno di quel centro div all'interno della colonna stessa. Esempio:

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

Quanto sopra dividere il contenuto in due colonne uguali e al centro tutto il contenuto racchiuso all'interno della div.

Per una rappresentazione più visiva del sistema di rete (consiglio di verificarlo), guarda qui: http://getbootstrap.com/2.3.2/scaffolding.html