Html 如何使用引导程序将网页分成 2 列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31584207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to divide a web in 2 columns using bootstrap?
提问by Naster
I want to divide a web page made with JSF in two columns, but I'm having problems as it's not displayed as I want. I'll show you what I have.
我想将用 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>
As you can see, there are two parts in my app: the left one is a form and the right one has instructions and a different form (I know that it isn't yet inside a h:form). I want the right panel to start in the center of the window, but I don't know how to do it. Thank you!
如您所见，我的应用程序中有两个部分：左侧是表单，右侧有说明和不同的表单（我知道它还没有在 ah:form 中）。我希望右侧面板从窗口中央开始，但我不知道该怎么做。谢谢！
回答by Naster
I've found a solution here: How to divide a Twitter bootstrap modal into 2 parts
我在这里找到了一个解决方案：如何将 Twitter 引导模式分为 2 部分
<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>
回答by Justin E. Samuels
Bootstrap is set up on a grid system, so you can span a total of 12 grids across. The easiest way to think of this, is divide your screen into 3 sections of equal amounts of 4 across. As long as your total columns add up to 12, it will balance out and display properly onto the screen. For centering the column, use the bootstrap class called "text-center". This makes all content within that div center within the column its' self. Example:
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>
The above will divide your content into two equal columns and center all the content enclosed within the div.
以上将您的内容分成两个相等的列，并将 div 中包含的所有内容居中。
For a more visual representation of the grid system (i recommend checking this out), look here: http://getbootstrap.com/2.3.2/scaffolding.html
有关网格系统的更直观表示（我建议查看此内容），请查看此处：http: //getbootstrap.com/2.3.2/scaffolding.html
