Bootstrap行和form-inlines改变输入的宽度

Question

我希望表单在每行中有三个控件.但是每行中控件的宽度是不同的(不太准确).我必须始终使用列吗？这是css的常规行为吗？有时css对我来说就像一个迷宫

这是我到目前为止所拥有的:

bootply

<form action="" method="post" role="form" class="form-inline">
    <div class="container">
        <div class="row">
            <div class="form-group">
                <label for="id_firstname">First Name</label>
                <input type="text" name="firstname" class="form-control" id="id_firstname">
            </div>
            <div class="form-group">
                <label for="id_middlename">Middle Name</label>
                <input type="text" name="middlename" class="form-control" id="id_middlename">
            </div>
            <div class="form-group">
                <label for="id_lastname">Last Name</label>
                <input type="text" name="lastname" class="form-control" id="id_lastname">
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="form-group">
                <label for="id_address">Address</label>
                <input type="text" name="address" class="form-control" id="id_address">
            </div>
            <div class="form-group">
                <label for="id_postalcode">Postal Code</label>
                <input type="text" name="postalcode" class="form-control" id="id_postalcode">
            </div>
            <div class="form-group">
                <label for="id_city">City</label>
                <input type="text" name="city" class="form-control" id="id_city">
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="form-group">
                <label for="id_telephone">PHone</label>
                <input type="text" name="phone" class="form-control" id="id_telephone">
            </div>
            <div class="form-group">
                <label for="id_mobile">Mobile</label>
                <input type="text" name="mobile" class="form-control" id="id_mobile">
            </div>
            <div class="form-group">
                <label for="id_email">E-mail</label>
                <input type="text" name="email" class="form-control" id="id_email">
            </div>
        </div>
    </div>
</form>

抱歉,您只想要链接.我还用.col-md-4包装了每个.form-group,但输入的宽度仍然相互不同

Answer 1

从内联表单上的Bootstrap文档

需要自定义宽度:默认情况下,Bootstrap中的输入,选择和textareas是100%宽.要使用内联表单,您必须在其中使用的表单控件上设置宽度.

如果您希望所有输入都是相同的大小,只需应用以下css

.form-group {
    width: 300px;
}
.form-group input {
    width: 300px;
}

用css引导

或者通过向col-md-4每个组添加类来修复每个表单组的宽度,如下所示:

<div class="form-group col-md-4">
    <label for="id_telephone">Phone</label>
    <input type="text" name="phone" class="form-control" id="id_telephone">
</div>

与课程bootply