如何使用bootstrap 3在PHP中构建混合列表单？

Question

我试图在bootstrap中创建一个列形式，其中一些行共享第二列。它是在内联网上制作员工档案编辑页面，所以我不太关心中小屏幕尺寸。

我试图使用我找到here的示例来制作它，但结果不是我需要的。我曾经习惯使用CSS样式表，但说实话，引导网格系统总是让我感到困惑。

这是我需要的模型：

以及我得到的内容：

这是我的代码：

<form method="post" class="form-horizontal">
  <div class="row">
    <div class="col-sm-6 col-lg-4">
      <div class="form-group">
        <label for="inputEmail" class="col-md-4 control-label">Email:</label>
        <div class="col-md-8">
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4">
      <div class="form-group">
        <label for="inputLabel3" class="col-md-4 control-label">Label 3:</label>
        <div class="col-md-8">
          <div class="img-preview img-preview-sm">
            <img src="<?php echo EMPLOYEE_IMG_URL; ?>/1.jpg">
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4">
      <div class="form-group">
        <label for="inputEmail" class="col-md-4 control-label">Email:</label>
        <div class="col-md-8">
          <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
      </div>
    </div>
  </div>
</form>

提前致谢!!!

Answer 1

对于前4个输入和图像，您必须创建分为两列的行（col-md-6） 对于左侧col设置输入col-12 右侧col设置图像