css - 如何自动将字段彼此相邻放置用户CSS bootstrap v3.2.0

Question

我在我的应用程序中创建了一个 future ，它允许我在页面上创建动态字段。我在这里需要做的是每次都以相同的方式显示这些字段。

我希望能够显示最多 2 个彼此相邻的字段“如果有的话” 我附上了我需要最终显示的屏幕截图

在下面的图片中，“No Longer an Employee”字段是一个标签，在其右侧有一个值，在本例中为“NULL”。在它的最右边还有一个名为“Outside Sales Primary Contact”的字段，值为“NULL”。

因此，如果有足够的字段，我想将该字段显示为 2 列，否则我会在左侧放一个，而在右侧不放任何内容。

不，我不需要有关如何生成字段的帮助。我需要有关 CSS 和 bootstrap 的帮助，了解如何显示彼此相邻的列。

Answer 1

我可能需要更多详细信息来澄清您的问题，但我为您制作了一个演示代码笔，说明我认为您正在寻找的内容。

演示 - http://codepen.io/BooststrapBay/pen/DGzIu

<div class="container">
  <div class="row">
    <div class="col-md-6 example-form">
      <ul>
        <li>
          <span>No longer an employee</span>
          <input class="form-control" type="text">
        </li>
        <li>
          <span>Support level</span>
          <input class="form-control" type="text">
        </li>
        <li>
          <span>Previous role</span>
          <input class="form-control" type="text">
        </li>
        <li>
          <span>Attitude</span>
          <input class="form-control" type="text">
        </li>
        <li>
          <span>Attitude detail</span>
          <input class="form-control" type="text">
        </li>
      </ul>
    </div>
    <div class="col-md-6 example-form">
      <ul>
        <li>
          <span>Outside sales primary contact</span>
          <input class="form-control" type="text">
        </li>
        <li>
          <span>Training primary contact</span>
          <input class="form-control" type="text">
        </li>
        <li>
          <span>Primary enrollment contact</span>
          <input class="form-control" type="text">
        </li>
        <li>
          <span>Birth month</span>
          <input class="form-control" type="text">
        </li>
        <li>
          <span>Birth day</span>
          <input class="form-control" type="text">
        </li>
      </ul>
    </div>
  </div>
</div>