Làm thế nào để chia một trang web trong 2 cột bằng cách sử dụng bootstrap?

Question

Tôi muốn chia một trang web được tạo bằng JSF thành hai cột, nhưng tôi gặp vấn đề vì nó không được hiển thị như tôi muốn. Tôi sẽ cho bạn thấy những gì tôi có.

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

Như bạn có thể thấy, có hai phần trong ứng dụng của tôi: biểu mẫu bên trái là biểu mẫu và biểu mẫu bên phải có hướng dẫn và biểu mẫu khác (tôi biết rằng nó chưa ở bên trong ah: biểu mẫu) . Tôi muốn bảng điều khiển bên phải bắt đầu ở giữa cửa sổ, nhưng tôi không biết phải làm thế nào. Cảm ơn bạn!

Answer 1

Tôi đã tìm thấy một giải pháp ở đây: 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 được thiết lập trên một hệ thống lưới điện, vì vậy bạn có thể chiều dài tổng cộng 12 lưới trên. Cách dễ nhất để nghĩ về điều này, là chia màn hình của bạn thành 3 phần với số lượng bằng nhau là 4 trên. Miễn là tổng số cột của bạn thêm tối đa 12, nó sẽ cân bằng và hiển thị chính xác trên màn hình. Để căn giữa cột, sử dụng lớp bootstrap gọi là "text-center". Điều này làm cho tất cả nội dung trong trung tâm div đó trong cột của nó là 'tự. Ví dụ:

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

Ở trên sẽ chia nội dung của bạn thành hai cột bằng nhau và căn giữa nội dung đi kèm trong div.

Để có bản trình bày trực quan hơn về hệ thống lưới (tôi khuyên bạn nên kiểm tra điều này), xem tại đây: http://getbootstrap.com/2.3.2/scaffolding.html