如何使用引导程序将网络分成 2 列？答案

【问题标题】：How to divide a web in 2 columns using bootstrap?如何使用引导程序将网络分成 2 列？
【发布时间】：2017-04-05 16:11:19
【问题描述】：

我想将使用 JSF 制作的网页分成两列，但我遇到了问题，因为它没有按我想要的方式显示。我会告诉你我有什么。

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

如您所见，我的应用程序中有两部分：左侧是表单，右侧包含说明和不同的表单（我知道它尚未包含在 h:form 中）。我希望右侧面板从窗口的中心开始，但我不知道该怎么做。谢谢！

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我在这里找到了解决方案：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>

【讨论】：

【解决方案2】：

Bootstrap 设置在网格系统上，因此您总共可以跨越 12 个网格。想到这一点的最简单方法是将屏幕分成 3 个等量的 4 个部分。只要您的总列加起来为 12，它就会平衡并正确显示在屏幕上。要使列居中，请使用名为“text-center”的引导类。这使得该列中该 div 中心内的所有内容成为其自身。示例：

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

上面会将您的内容分成两个相等的列，并将所有包含在 div 中的内容居中。

有关网格系统的更直观的表示（我建议检查一下），请看这里：http://getbootstrap.com/2.3.2/scaffolding.html

【讨论】：