将2个表单字段并排放置在引导列中
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将2个表单字段并排放置在引导列中相关的知识,希望对你有一定的参考价值。
我正在努力设置,我认为这将是一个非常简单的布局。
我正在使用Yii2生成表单。在大多数情况下一切都很好,但我需要设置形成字段,以便它们在一列中并排。我有一个用于脚的表单字段和一个用于英寸的表单字段,因此我希望标签后跟脚字段和'然后是小字段和“
现在,默认我的Yii2正在生成(我已经尝试了大量的突变,但我想我会发布基本生成的代码,然后我可能会或可能不会搞砸了)。
<div class="col-md-4">
<div class="form-group field-projects-loadlength has-success">
<label class="control-label col-md-4" for="projects-loadlength">Length</label>
<div class="col-sm-6">
<input type="text" id="projects-loadlength" class="form-control" name="Projects[LoadLength]" value="120.00" tabindex="32" aria-invalid="false">
<p class="help-block help-block-error "></p>
</div>
</div>
<div class="form-group field-projects-loadlength has-success">
<div class="col-sm-6 col-sm-offset-3">
<input type="text" id="projects-loadlength" class="form-control" name="Projects[LoadLength]" value="120.00" tabindex="34">
<p class="help-block help-block-error "></p>
</div>
</div>
</div>
我只是无法获得CSS,或者html是对的吗?我正在使用BootStrap 3。
最初的div col-md-4是我希望将我的2个表单字段并排放置的容器。这是一个3列设置(每行一个col-md-4),第1列将容纳长度,第2列宽度和第3列高度
我的实际Yii2代码是
<div class="col-md-4">
<div class="row">
<div class="form-group form-inline">
<?php
echo $form->field(
$model,
'LoadOverHang',
[
'options' => ['class' => 'col-md-8 no-padding'],
'inputOptions' => [
'value' => Yii::$app->formatter->asInteger($model->LoadOverHang),
'tabIndex'=>'50',
],
]
)->textInput();
echo "'";
?>
<!-- </div>
<div class="col-md-4" style="margin-left: 2px !important;"> -->
<?php
echo $form->field(
$model,
'LoadOverHang',
[
'inputOptions' => [
'value' => Yii::$app->formatter->asInteger($model->LoadOverHang),
'tabIndex'=>'52',
],
'options' => ['class' => 'col-md-4'],
]
)->textInput()->label(false);
echo '"';
?>
</div>
</div>
</div>
非常感谢您的帮助。
根据反馈,我尝试了以下内容,但仍然最终将字段拆分为2行,而不是并排?
<div class="column">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-xs-6 form-group field-projects-loadoverhang">
<label class="control-label" for="projects-loadoverhang"> Overhang</label>
<input type="text" id="projects-loadoverhang" class="form-control" name="Projects[LoadOverHang]" value="0" tabindex="50">
<p class="help-block help-block-error "></p>
</div>
<div class="col-xs-6 form-group field-projects-loadoverhang">
<input type="text" id="projects-loadoverhang" class="form-control" name="Projects[LoadOverHang]" value="0" tabindex="52">
<p class="help-block help-block-error "></p>
</div>
</div>
</div>
</div>
</div>
答案
我设法把东西放在一起
<div class="col-md-4 no-padding">
<div class="input-group">
<span class="input-group-addon form-entry"><b>Height</b></span>
<div class="field-projects-loadheight has-success">
<input type="text" id="projects-loadheight" class="form-control" name="Projects[LoadHeight]" value="13" tabindex="36" aria-invalid="false">
<p class="help-block help-block-error "></p>
</div>
<span class="input-group-addon form-entry form-entry-addon input-group-separator">ft</span>
<div class="field-projects-loadheight has-success">
<input type="text" id="projects-loadheight" class="form-control" name="Projects[LoadHeight]" value="13" tabindex="38">
<p class="help-block help-block-error "></p>
</div>
<span class="input-group-addon form-entry form-entry-addon">in</span>
</div>
</div>
另一答案
你有一个包装容器吗?此外,我认为你的行和列翻转它应该是.container
> .row
> .col-x-x
。您可以嵌套多个.row
s和.col-x-x
s,但“只有列可能是行的直接子项。”
看看这是否有帮助:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-xs-6">
<div class="form-group field-projects-loadlength has-success">
<label class="control-label" for="projects-loadlength">Length</label>
<input type="text" id="projects-loadlength" class="form-control" name="Projects[LoadLength]" value="120.00" tabindex="32" aria-invalid="false" />
<p class="help-block help-block-error "></p>
</div>
</div>
<div class="col-xs-6">
<div class="form-group field-projects-loadlength has-success">
<input type="text" id="projects-loadlength" class="form-control" name="Projects[LoadLength]" value="120.00" tabindex="34" />
<p class="help-block help-block-error "></p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
// column 2 content
</div>
<div class="col-md-4">
// column 3 content
</div>
</div>
</div>
以下是Bootstrap 3的网格https://getbootstrap.com/docs/3.3/css/#grid的文档
以上是关于将2个表单字段并排放置在引导列中的主要内容,如果未能解决你的问题,请参考以下文章