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

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），第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>

Answer 1

我设法把东西放在一起

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

Answer 2

你有一个包装容器吗？此外，我认为你的行和列翻转它应该是.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的文档