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

【问题标题】：How can I build a mixed-columns form in PHP using bootstrap 3?如何使用 bootstrap 3 在 PHP 中构建混合列表单？
【发布时间】：2016-09-18 22:39:24
【问题描述】：

我正在尝试在引导程序中创建一个 1 列表单，其中一些行共享第二列。它用于在 Intranet 中制作员工个人资料编辑页面，所以我并不关心中等或小屏幕尺寸。

我正在尝试使用我找到的示例 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>

提前致谢！！！

【问题讨论】：

HTML 与您显示的布局不匹配。那么我们应该如何处理它
是的，HTML 有第三列，但这里不是这种情况……因为无论我有多少列，从第二行开始，它们都会被向下推，直到图像结束。

标签： php html css twitter-bootstrap

【解决方案1】：

对于前 4 个输入和图像，您必须创建分为两列的行 (col-md-6) 对于带有 col-12 的左 col 集输入为正确的col设置图像

【讨论】：