与引导程序内联对齐 4 个字段

Question

我正在尝试制作一个具有一些水平和内联字段的表单，找到了最好的方法，而不是与表单类作斗争，只是尝试像另一个常规模板一样做，我可以将标签和字段放在每个旁边其他但他们没有占用所有可能的空间，并且互相接触，我希望能够使用行的所有空间，

这就是我所拥有的： 谢谢大家

这是我想要消除的差距，我有点欺骗并使用 div 边距，但我认为这不是正确的方法 =(

<div class="col-lg-4" style="background-color:green">
<form>
    <div class="form-group">
        <div class="row">
            <label for="name" class="control-label">Name</label>
        </div>
        <div class="row">
            <input type="text" class="form-control" name="name" placeholder="name"/>
        </div>
    </div>

    <br>
    i want the birthday portion to be all one line all next to each other.
    using all the space like the Name field above, should i use some kind of <span>?

    <div class="form-group">
        <div class="row">
            <div class="col-lg-3">
                <label for="birthday" class="control-label">Birthday:</label>
            </div>
            <div class="col-lg-3">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="col-lg-3">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="col-lg-3">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>

    </div>
</form>

Answer 1

您可能希望使用 .col-xs-3 在所有屏幕尺寸上拥有 4 个相等的列。使用.col-lg-3 只会在大屏幕（≥1200px）上创建列。否则，它将折叠以显示一个在另一个之上。 此外，要消除三个输入之间的间隙，您必须移除 .col-* 类上的填充。

div.col-xs-3 {
  padding-left:0;
  padding-right:0;
}/*Just as an example. You might not want to this for ALL .col-xs-3 classes. You can modify this just for the input divs*/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-lg-4" style="background-color:green">
<form>
    <div class="form-group">
        <div class="row">
            <label for="name" class="control-label">Name</label>
        </div>
        <div class="row">
            <input type="text" class="form-control" name="name" placeholder="name"/>
        </div>
    </div>



    <div class="form-group">
        <div class="row">
            <div class="col-xs-3">
                <label for="birthday" class="control-label">Birthday:</label>
            </div>
            <div class="col-xs-3">
                <input type="text" class="form-control" placeholder="year"/>
            </div>
            <div class="col-xs-3">
                <input type="text" class="form-control" placeholder="month"/>
            </div>
            <div class="col-xs-3">
                <input type="text" class="form-control" placeholder="day"/>
            </div>
        </div>

    </div>
</form>
</div>

Answer 2

在下面的代码中我改变了一些东西来实现你想要的情况。我删除了一些行，因为您根本不需要所有这些行。 Bootstrap 行会调整您的网格，从而导致表单字段的宽度有所不同。

我最终为您编写了以下代码：

<div class="col-lg-4" style="background-color:green">
  <form>
    <div class="form-group">
      <label for="name" class="control-label">Name</label>
      <input type="text" class="form-control" name="name" placeholder="name"/>
    </div>

    <div class="form-group">
      <div class="row">
        <div class="col-lg-3">
          <label for="birthday" class="control-label">Birthday:</label>
        </div>
        <div class="col-lg-3">
          <input type="text" class="form-control" placeholder="year"/>
        </div>
        <div class="col-lg-3">
          <input type="text" class="form-control" placeholder="month"/>
        </div>
        <div class="col-lg-3">
          <input type="text" class="form-control" placeholder="day"/>
        </div>
      </div>
   </form>
</div>

如果您还希望在内联字段上方显示“生日”，您可以将类更改为：

<div class="form-group">
  <div class="row">
    <div class="col-lg-12">
      <label for="birthday" class="control-label">Birthday:</label>
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder="year"/>
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder="month"/>
    </div>
    <div class="col-lg-4">
      <input type="text" class="form-control" placeholder="day"/>
    </div>
  </div>