twitter-bootstrap Bootstrap 行和表单内联改变输入的宽度

Bootstrap rows and form-inlines changing width of inputs

提问by Apostolos

I want a form to have three controls in each row. But the width of the control in every row is different(less to be exact). Must I always use columns? Is that regular behaviour of css? Sometimes the css feels like a labyrinth to me

我想要一个表单，每行都有三个控件。但是每行控件的宽度都不同（不太准确）。我必须总是使用列吗？这是 css 的常规行为吗？有时 css 对我来说就像一个迷宫

Here's what I have so far:

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

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>

Sorry thought you only wanted the link. I also wrapped every .form-group with .col-md-4 but still the width of the inputs differ from each other

抱歉以为你只想要链接。我还用 .col-md-4 包裹了每个 .form-group 但输入的宽度仍然彼此不同

回答by KyleMit

From Bootstrap Documentation on Inline Forms

来自内联表单的Bootstrap 文档

Requires custom widths: Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

需要自定义宽度：Bootstrap 中的输入、选择和文本区域默认为 100% 宽。要使用内联表单，您必须在其中使用的表单控件上设置宽度。

---

---

Just apply the following css if you want all the inputs to be the same size

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

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

bootply with css

用 css 引导

---

---

ORfix the width of each of your form groups by adding col-md-4class to each group like this:

或者通过向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 with classes

引导类