如何自动将字段旁边的用户CSS bootstrap v3.2.0放置

I have create a future in my application that will allow me to create dynamic field on a page. What I need to do here is to display the those field the same way every time.

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

I want to be able to display up to 2 field next to each other "if any" I have attached a screenshot on what I need the final display to look like 如何自动将字段旁边的用户CSS bootstrap v3.2.0放置

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

from the image below the field "No Longer an Employee" is a label and to the right of it there is a value in this case "NULL." And to the far right of it there is another field called "Outside Sales Primary Contact" with a value of "NULL."

从“不再是员工”字段下面的图像是一个标签,在它的右边有一个值,在这种情况下是“NULL”。在它的最右边还有另一个名为“Outside Sales Primary Contact”的字段,其值为“NULL”。

So I want to display the field into 2 column if there is enough fields other wise put one on the left and nothing on the right.

所以我想将字段显示为2列,如果有足够的字段,则在左边放一个,在右边没有。

not I don't need help with how to generate the field. I need help with CSS and bootstrap on how to display the column next to each other.

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

1 个解决方案

#1

I may need some more details to clarify your question but I made you a demo codepen of what I think you're looking for.

我可能需要更多细节来澄清您的问题,但我为您制作了一个我认为您正在寻找的演示码。

DEMO - http://codepen.io/BooststrapBay/pen/DGzIu

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

#1