将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。您可以嵌套多个.rows和.col-x-xs,但“只有列可能是行的直接子项。”

看看这是否有帮助:

<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个表单字段并排放置在引导列中的主要内容,如果未能解决你的问题,请参考以下文章

如何将 2 个按钮并排放置?

Chrome 和 Safari 中代码镜像块的高度不同

如何使用导航组件在活动中并排显示 2 个片段 [关闭]

如何通过单击适配器类中代码的项目中的删除按钮来删除列表视图中的项目后重新加载片段?

包含引导列的 Tabstrip

AsyncTask 中代码崩溃的旋转屏幕