javascript - 将 4 个字段与 bootstrap 对齐

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 只会在大屏幕(≥1200 像素)上创建列。否则，它将折叠以显示一个在另一个之上。此外，要消除三个输入之间的间隙，您必须消除 .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>