Question

我正在努力设置，我认为这是一个非常简单的布局。

我正在使用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），第一列将容纳长度，第二宽度和第三高度

我的实际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>

非常感谢您的帮助。

根据反馈，我尝试了以下操作，但最终还是将字段分为两行，而不是并排？

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

Answer 1

您是否在所有这些包装纸上都有包装容器？另外，我认为您的行和列都已翻转。应该为.container> .row> .col-x-x。您可以嵌套多个.row和.col-x-x，但是“只有列可能是行的直接子代。”

看看是否有帮助：

<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

的文档

Answer 2

我设法把东西放在一起

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

在引导程序列中并排放置2个表单字段

2 个答案: