Bootstrap 组合 vertical/inline 字段的复杂表单布局
Bootstrap complex form layout for combined vertical/inline fields
我是 Bootstrap 的新手，但我的技能增长很快，也很欣赏它。我需要构建一个相当复杂的页面，其中将包含大量表单元素，包括多个地址 fill-in 组件。我在这里附上了我想要的基本设计的图像，但似乎无法用我可用的基本表单设计元素来实现它。我觉得我的方法变得 "out of control" 是因为我有太多的嵌套级别并且对我实际在做什么的理解不够。因此，除了 post 我目前得到的代码，谁能给我一个简化的例子来说明我的设计是如何实现的？
我的 dotted-line 矩形表示我的页面应该有一个 two-column 显示，大部分表单元素都位于更宽的 RH 侧。然后，在该列中，我的表单具有一些额外的复杂性。还有许多我什至没有在这里展示的附加表单元素，这是我想以这种方式设计它的主要原因 -- 因为我需要尽可能地节省垂直屏幕空间。
感谢您的帮助。
您应该为此使用 http://getbootstrap.com/css/#grid。
我的一个简单示例。希望这能帮助您理解这个概念。
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-3">
Left side for labes
</div>
<div class="col-md-9">
Right side for forms
<div class="row">
<div class="col-md-12">
longer forms
</div>
</div>
<div class="row">
<div class="col-md-3">
shorter forms
</div>
<div class="col-md-3">
shorter forms
</div>
<div class="col-md-3">
shorter forms
</div>
<div class="col-md-3">
shorter forms
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
Right panel with instructions
</div>
</div>
你应该研究 bootstrap 水平形式：http://getbootstrap.com/css/#forms-horizontal
这里是您使用 bootstrap 水平形式寻找的演示：http://jsfiddle.net/swm53ran/31/（该演示还展示了 bootstrap 的响应能力）
本质上，您想将 bootstrap 的网格系统与 bootstrap 的水平形式结合起来。
<div class="col-xs-8">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email"/>
</div>
</div>
</form>
</div>
<div class="col-xs-4">
Some other Elements and Instruction Goes Here
</div>
希望对您有所帮助！
如果您想合并垂直组和内联组，您应该尝试以下方法希望对您有所帮助
<div class="row">
<div class="col-sm-6">
<form class="form-horizontal" role="form" method="POST">
<div class="form-group">
<label for="line1" class="col-sm-2 control-label">Location Address</label>
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">Line 1</span>
<input type="text" class="form-control" aria-describedby="basic-addon1" name='line1'>
</div>
</div>
<div class="form-group">
<div class="input-group col-sm-10 col-sm-offset-2"> <span class="input-group-addon" id="basic-addon1">Line 2</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<div class="input-group col-sm-10 col-sm-offset-2"> <span class="input-group-addon" id="basic-addon1">PO Box</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
<div class="row">
<div class="col-sm-5 col-sm-offset-2">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">City</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-sm-2">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">State</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-sm-3">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">Zip</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</form>
</div>
<div class="col-sm-6">Here is the second column</div>
</div>
你可以在这里看到结果http://jsfiddle.net/a2Lech1u/3/
某些类型的表格在有和没有 Bootstrap 的情况下都很复杂。您的表单没有完整的开箱即用解决方案。您可以将 Bootstrap 与自定义 CSS 结合使用并使用嵌套。 “最简单”的方法是对每个块进行缩进、注释等等。非常注重细节。
这是您拥有的表单图像中更烦人的部分的示例，它是第二列中的三个嵌套列。我调整了所有与此类似的表格，以在嵌套的 .form-group（其作用类似于 .row）中使用百分比间距，因为 30px 间距太大了。了解网格系统，而不仅仅是使用它，将帮助您从 Bootstrap.
中获得更多收益
演示：https://jsbin.com/sejemi
CSS:
/* ---- text-align right the .control-label until 699px MAX width -----*/
@media (max-width:767px) {
.form-custom .control-label { text-align: right }
}
@media (max-width:699px) {
.form-custom .control-label {
width: 100%;
text-align: left;
}
.form-custom .payment-inputs { width: 100% }
.form-custom .submit-form { margin-left: 0 }
}
/* ----------- adjusted nested columns grid and gutters ----------- */
.form-custom .form-group [class*="col-"] .form-group [class*="col-"] {
padding-left: 1%;
padding-right: 1%;
}
.form-custom .form-group [class*="col-"] .form-group {
margin-left: -1%;
margin-right: -1%;
}
.form-custom .form-group [class*="col-"] .form-group [class*="col-"]:not(:last-child) { margin-bottom: 5px }
@media (min-width:768px) {
.form-custom .form-group [class*="col-"] .form-group [class*="col-"]:not(:last-child) { margin-bottom: 0 }
}
HTML
<div class="container">
<form class="form-horizontal form-custom">
<!-- BEGIN form-group line-1 -->
<div class="form-group">
<label class="col-sm-4 control-label">Words Go Here</label>
<div class="col-sm-8">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">Line 1</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
</div>
<!-- /.col-sm-8 -->
</div>
<!-- /.form-group -->
<!-- END form-group line-1 -->
<!-- BEGIN form-group city-state-zip -->
<div class="form-group">
<div class="col-sm-8 col-sm-offset-4">
<div class="form-group">
<!-- acts as .row -->
<div class="col-sm-5">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">City</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<!-- /.input-group -->
</div>
<!-- /.col-sm-5 (nested) -->
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">State</span>
<input type="text" class="form-control" placeholder="State" aria-describedby="sizing-addon2">
</div>
<!-- /.input-group -->
</div>
<!-- /.col-sm-3 (nested) -->
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">Zip</span>
<input type="text" class="form-control" placeholder="Zip" aria-describedby="sizing-addon2">
</div>
<!-- /.input-group -->
</div>
<!-- /.col-sm-4 (nested) -->
</div>
<!-- /.form-group (nested) -->
</div>
<!-- /.col-sm-8 .col-sm-offset-4 -->
</div>
<!-- /.form-group -->
<!-- END form-group city-state-zip -->
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-default">Button</button>
</div>
<!-- /col-sm-offset-4.col-sm-8 -->
</div>
<!-- /.form-group -->
</form>
</div> <!-- /.container -->
我是 Bootstrap 的新手，但我的技能增长很快，也很欣赏它。我需要构建一个相当复杂的页面，其中将包含大量表单元素，包括多个地址 fill-in 组件。我在这里附上了我想要的基本设计的图像，但似乎无法用我可用的基本表单设计元素来实现它。我觉得我的方法变得 "out of control" 是因为我有太多的嵌套级别并且对我实际在做什么的理解不够。因此，除了 post 我目前得到的代码，谁能给我一个简化的例子来说明我的设计是如何实现的？
我的 dotted-line 矩形表示我的页面应该有一个 two-column 显示，大部分表单元素都位于更宽的 RH 侧。然后，在该列中，我的表单具有一些额外的复杂性。还有许多我什至没有在这里展示的附加表单元素，这是我想以这种方式设计它的主要原因 -- 因为我需要尽可能地节省垂直屏幕空间。
感谢您的帮助。
您应该为此使用 http://getbootstrap.com/css/#grid。
我的一个简单示例。希望这能帮助您理解这个概念。
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-3">
Left side for labes
</div>
<div class="col-md-9">
Right side for forms
<div class="row">
<div class="col-md-12">
longer forms
</div>
</div>
<div class="row">
<div class="col-md-3">
shorter forms
</div>
<div class="col-md-3">
shorter forms
</div>
<div class="col-md-3">
shorter forms
</div>
<div class="col-md-3">
shorter forms
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
Right panel with instructions
</div>
</div>
你应该研究 bootstrap 水平形式：http://getbootstrap.com/css/#forms-horizontal
这里是您使用 bootstrap 水平形式寻找的演示：http://jsfiddle.net/swm53ran/31/（该演示还展示了 bootstrap 的响应能力）
本质上，您想将 bootstrap 的网格系统与 bootstrap 的水平形式结合起来。
<div class="col-xs-8">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email"/>
</div>
</div>
</form>
</div>
<div class="col-xs-4">
Some other Elements and Instruction Goes Here
</div>
希望对您有所帮助！
如果您想合并垂直组和内联组，您应该尝试以下方法希望对您有所帮助
<div class="row">
<div class="col-sm-6">
<form class="form-horizontal" role="form" method="POST">
<div class="form-group">
<label for="line1" class="col-sm-2 control-label">Location Address</label>
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">Line 1</span>
<input type="text" class="form-control" aria-describedby="basic-addon1" name='line1'>
</div>
</div>
<div class="form-group">
<div class="input-group col-sm-10 col-sm-offset-2"> <span class="input-group-addon" id="basic-addon1">Line 2</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
<div class="form-group">
<div class="input-group col-sm-10 col-sm-offset-2"> <span class="input-group-addon" id="basic-addon1">PO Box</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
<div class="row">
<div class="col-sm-5 col-sm-offset-2">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">City</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-sm-2">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">State</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-sm-3">
<div class="input-group"> <span class="input-group-addon" id="basic-addon1">Zip</span>
<input type="text" class="form-control" aria-describedby="basic-addon1">
</div>
</div>
</div>
</form>
</div>
<div class="col-sm-6">Here is the second column</div>
</div>
你可以在这里看到结果http://jsfiddle.net/a2Lech1u/3/
某些类型的表格在有和没有 Bootstrap 的情况下都很复杂。您的表单没有完整的开箱即用解决方案。您可以将 Bootstrap 与自定义 CSS 结合使用并使用嵌套。 “最简单”的方法是对每个块进行缩进、注释等等。非常注重细节。
这是您拥有的表单图像中更烦人的部分的示例，它是第二列中的三个嵌套列。我调整了所有与此类似的表格，以在嵌套的 .form-group（其作用类似于 .row）中使用百分比间距，因为 30px 间距太大了。了解网格系统，而不仅仅是使用它，将帮助您从 Bootstrap.
中获得更多收益演示：https://jsbin.com/sejemi
CSS:
/* ---- text-align right the .control-label until 699px MAX width -----*/
@media (max-width:767px) {
.form-custom .control-label { text-align: right }
}
@media (max-width:699px) {
.form-custom .control-label {
width: 100%;
text-align: left;
}
.form-custom .payment-inputs { width: 100% }
.form-custom .submit-form { margin-left: 0 }
}
/* ----------- adjusted nested columns grid and gutters ----------- */
.form-custom .form-group [class*="col-"] .form-group [class*="col-"] {
padding-left: 1%;
padding-right: 1%;
}
.form-custom .form-group [class*="col-"] .form-group {
margin-left: -1%;
margin-right: -1%;
}
.form-custom .form-group [class*="col-"] .form-group [class*="col-"]:not(:last-child) { margin-bottom: 5px }
@media (min-width:768px) {
.form-custom .form-group [class*="col-"] .form-group [class*="col-"]:not(:last-child) { margin-bottom: 0 }
}
HTML
<div class="container">
<form class="form-horizontal form-custom">
<!-- BEGIN form-group line-1 -->
<div class="form-group">
<label class="col-sm-4 control-label">Words Go Here</label>
<div class="col-sm-8">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">Line 1</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
</div>
<!-- /.col-sm-8 -->
</div>
<!-- /.form-group -->
<!-- END form-group line-1 -->
<!-- BEGIN form-group city-state-zip -->
<div class="form-group">
<div class="col-sm-8 col-sm-offset-4">
<div class="form-group">
<!-- acts as .row -->
<div class="col-sm-5">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">City</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<!-- /.input-group -->
</div>
<!-- /.col-sm-5 (nested) -->
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">State</span>
<input type="text" class="form-control" placeholder="State" aria-describedby="sizing-addon2">
</div>
<!-- /.input-group -->
</div>
<!-- /.col-sm-3 (nested) -->
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">Zip</span>
<input type="text" class="form-control" placeholder="Zip" aria-describedby="sizing-addon2">
</div>
<!-- /.input-group -->
</div>
<!-- /.col-sm-4 (nested) -->
</div>
<!-- /.form-group (nested) -->
</div>
<!-- /.col-sm-8 .col-sm-offset-4 -->
</div>
<!-- /.form-group -->
<!-- END form-group city-state-zip -->
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-default">Button</button>
</div>
<!-- /col-sm-offset-4.col-sm-8 -->
</div>
<!-- /.form-group -->
</form>
</div> <!-- /.container -->