Question

我将与the documentation一起关注，并尝试为我正在构建的注册表单实现一行表单输入。相关HTML：

<div class="row">
    <div class="my-5 py-4 offset-md-4 col-md-5 col-lg-4 justify-content-center align-items-center">
        <form name="fos_user_registration_form" method="post" action="/app_dev.php/register/" class="fos_user_registration_register">

        <div class="form-group">
            <label for="fos_user_registration_form_name" class="required">Name</label>
            <input type="text" id="fos_user_registration_form_name" name="fos_user_registration_form[name]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_line1" class="required">Address Line 1</label>
            <input type="text" id="fos_user_registration_form_line1" name="fos_user_registration_form[line1]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_line2">Address Line 2 (optional)</label>
            <input type="text" id="fos_user_registration_form_line2" name="fos_user_registration_form[line2]" class="form-control" />
        </div>
        <div class="form-row">
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_city" class="required">City</label>
                <input type="text" id="fos_user_registration_form_city" name="fos_user_registration_form[city]" required="required" />
            </div>
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_state" class="required">State</label>
                <select id="fos_user_registration_form_state" name="fos_user_registration_form[state]"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>
            </div>
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
                <input type="text" id="fos_user_registration_form_zipcode" name="fos_user_registration_form[zipcode]" required="required" />
            </div>
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_phone">Phone (optional)</label>
            <input type="text" id="fos_user_registration_form_phone" name="fos_user_registration_form[phone]" />
        </div>

        <small>We only ship within the US</small>

        <div>
            <button type="submit" id="register-submit-btn" class="btn btn-burnt-orange">Register account</button>
        </div>
        <input type="hidden" id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" value="knrAUCbJNdBKVtkqR57qEzOAExZaqWmleKA4nRBiKeg" />
        </form>
    </div>
</div>

这将导致：

无论我在行中给出三个元素的宽度是多少，它们都不能整齐地容纳在行中。我猜问题的一部分是状态下拉列表……它的宽度没有像我想要的那样缩小。但是，即使我将城市和邮政编码的宽度设置得较窄，因此总宽度小于12列，对齐方式仍然会与屏幕截图类似。

需要注意的一件事-我不能真正更改包装器div的类/属性。这是一个Symfony项目，因此wrapper元素是我所有表单的基础。其他的看起来不错，所以我真的不想仅仅因为这个异常值而弄乱它。

Answer 1

容易修复，带有选择的行中的三个表单元素缺少类form-control

添加它，它将正确呈现

<div class="row">
    <div class="my-5 py-4 offset-md-4 col-md-5 col-lg-4 justify-content-center align-items-center">
        <form name="fos_user_registration_form" method="post" action="/app_dev.php/register/" class="fos_user_registration_register">

        <div class="form-group">
            <label for="fos_user_registration_form_name" class="required">Name</label>
            <input type="text" id="fos_user_registration_form_name" name="fos_user_registration_form[name]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_line1" class="required">Address Line 1</label>
            <input type="text" id="fos_user_registration_form_line1" name="fos_user_registration_form[line1]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_line2">Address Line 2 (optional)</label>
            <input type="text" id="fos_user_registration_form_line2" name="fos_user_registration_form[line2]" class="form-control" />
        </div>
        <div class="form-row">
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_city" class="required">City</label>
                <input type="text" id="fos_user_registration_form_city" name="fos_user_registration_form[city]" required="required" class="form-control" />
            </div>
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_state" class="required">State</label>
                <select id="fos_user_registration_form_state" name="fos_user_registration_form[state]" class="form-control"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>
            </div>
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
                <input type="text" id="fos_user_registration_form_zipcode" name="fos_user_registration_form[zipcode]" required="required" class="form-control" />
            </div>
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_phone">Phone (optional)</label>
            <input type="text" id="fos_user_registration_form_phone" name="fos_user_registration_form[phone]" class="form-control" />
        </div>

        <small>We only ship within the US</small>

        <div>
            <button type="submit" id="register-submit-btn" class="btn btn-burnt-orange">Register account</button>
        </div>
        <input type="hidden" id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" value="knrAUCbJNdBKVtkqR57qEzOAExZaqWmleKA4nRBiKeg" />
        </form>
    </div>
</div>

为了保持一致，我还将其添加到您的电话号码字段中。

查看演示 https://codepen.io/twickstrom/pen/wRMmaa

Answer 2

正如其他所有答案所述，使用form-control会有所帮助。但是在较小的屏幕宽度下，您仍然可能会有一些重叠。

使用col-md-4和/或col-md来代替输入，而不是使用col-md-auto。

col*会变长以填充宽度。

col-*-auto将缩小以适合其内容的宽度。

  <div class="form-row">
            <div class="form-group col-md">
                <label for="fos_user_registration_form_city" class="required">City</label>
                <input type="text" id="fos_user_registration_form_city" class="form-control" name="fos_user_registration_form[city]" required="required">
            </div>
            <div class="form-group col-md-auto">
                <label for="fos_user_registration_form_state" class="required">State</label>
                <select id="fos_user_registration_form_state" class="form-control" name="fos_user_registration_form[state]">
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    ...
                </select>
            </div>
            <div class="form-group col-md">
                <label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
                <input type="text" id="fos_user_registration_form_zipcode" class="form-control" name="fos_user_registration_form[zipcode]" required="required">
            </div>
  </div>

https://www.codeply.com/go/oCoGMyfmXv

此外， ，您可以在状态select col上使用px-0来为其容纳更多空间，并缩小输入之间的空间。 / p>

另一种选择 是在一个列上使用已定义的宽度，例如select上的col-md-3。将其与col-md结合在一起，然后将select缩小到行宽的25％，其余2个cols填充剩余的宽度。

   <div class="form-row">
                <div class="form-group col-md">
                    <label for="fos_user_registration_form_city" class="required">City</label>
                    <input type="text" id="fos_user_registration_form_city" class="form-control" name="fos_user_registration_form[city]" required="required">
                </div>
                <div class="form-group col-md-3">
                    <label for="fos_user_registration_form_state" class="required">State</label>
                    <select id="fos_user_registration_form_state" class="form-control" name="fos_user_registration_form[state]">
                        <option value="AL">Alabama</option>
                        <option value="AK">Alaska</option>
                        <option value="AZ">Arizona</option>
                        ...
                    </select>
                </div>
                <div class="form-group col-md">
                    <label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
                    <input type="text" id="fos_user_registration_form_zipcode" class="form-control" name="fos_user_registration_form[zipcode]" required="required">
                </div>
    </div>

Demo of both options

Answer 3

在form-group元素内的How do I copy to the clipboard in JavaScript?和w-100标记上添加“ input”类。它将解决您的问题

select

<div class="form-group col-md-4">
    <label for="fos_user_registration_form_city" class="required">City</label>
    <input type="text" id="fos_user_registration_form_city" class="w-100" name="fos_user_registration_form[city]" required="required" />
</div>

Answer 4

之所以发生这种情况，是因为col-lg-4中出现孔形式，而col-lg-4中不适合三列

请在div下方使用

<div class="my-5 py-4 offset-md-3 col-md-5 col-lg-7 justify-content-center align-items-center">

Answer 5

您在城市，邮政编码和州的输入控件中缺少class="form-control"。

查看以下HTML：

<div class="row">
    <div class="my-5 py-4 offset-md-4 col-md-5 col-lg-4 justify-content-center align-items-center">
        <form name="fos_user_registration_form" method="post" action="/app_dev.php/register/" class="fos_user_registration_register">

            <div class="form-group">
                <label for="fos_user_registration_form_name" class="required">Name</label>
                <input type="text" id="fos_user_registration_form_name" name="fos_user_registration_form[name]" required="required" class="form-control" />
            </div>
            <div class="form-group">
                <label for="fos_user_registration_form_line1" class="required">Address Line 1</label>
                <input type="text" id="fos_user_registration_form_line1" name="fos_user_registration_form[line1]" required="required" class="form-control" />
            </div>
            <div class="form-group">
                <label for="fos_user_registration_form_line2">Address Line 2 (optional)</label>
                <input type="text" id="fos_user_registration_form_line2" name="fos_user_registration_form[line2]" class="form-control" />
            </div>
            <div class="form-row">
                <div class="form-group col-md-4">
                    <label for="fos_user_registration_form_city" class="required">City</label>
                    <input type="text" id="fos_user_registration_form_city" name="fos_user_registration_form[city]" required="required" class="form-control"/>
                </div>
                <div class="form-group col-md-4">
                    <label for="fos_user_registration_form_state" class="required">State</label>
                    <select id="fos_user_registration_form_state" name="fos_user_registration_form[state]" class="form-control">
                    <option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>
                </div>
                <div class="form-group col-md-4">
                    <label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
                    <input type="text" id="fos_user_registration_form_zipcode" name="fos_user_registration_form[zipcode]" required="required" class="form-control"/>
                </div>
            </div>
            <div class="form-group">
                <label for="fos_user_registration_form_phone">Phone (optional)</label>
                <input type="text" id="fos_user_registration_form_phone" name="fos_user_registration_form[phone]" />
            </div>

            <small>We only ship within the US</small>

            <div>
                <button type="submit" id="register-submit-btn" class="btn btn-burnt-orange">Register account</button>
            </div>
            <input type="hidden" id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" value="knrAUCbJNdBKVtkqR57qEzOAExZaqWmleKA4nRBiKeg" />
        </form>
    </div>
</div>

现在它将如下所示：

Answer 6

添加class="form-control"。 Codepen：https://codepen.io/rogatnev-nikita/pen/maVjwb

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">

<div class="row">
    <div class="my-5 py-4 offset-md-4 col-md-5 col-lg-4 justify-content-center align-items-center">
        <form name="fos_user_registration_form" method="post" action="/app_dev.php/register/" class="fos_user_registration_register">
        <div class="form-group">
            <label for="fos_user_registration_form_name" class="required">Name</label>
            <input type="text" id="fos_user_registration_form_name" name="fos_user_registration_form[name]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_line1" class="required">Address Line 1</label>
            <input type="text" id="fos_user_registration_form_line1" name="fos_user_registration_form[line1]" required="required" class="form-control" />
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_line2">Address Line 2 (optional)</label>
            <input type="text" id="fos_user_registration_form_line2" name="fos_user_registration_form[line2]" class="form-control" />
        </div>
        <div class="form-row">
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_city" class="required">City</label>
                <input class="form-control"  type="text" id="fos_user_registration_form_city" name="fos_user_registration_form[city]" required="required" />
            </div>
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_state" class="required">State</label>
                <select class="form-control" id="fos_user_registration_form_state" name="fos_user_registration_form[state]"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>
            </div>
            <div class="form-group col-md-4">
                <label for="fos_user_registration_form_zipcode" class="required">Zipcode</label>
                <input class="form-control" type="text" id="fos_user_registration_form_zipcode" name="fos_user_registration_form[zipcode]" required="required" />
            </div>
        </div>
        <div class="form-group">
            <label for="fos_user_registration_form_phone">Phone (optional)</label>
            <input type="text" id="fos_user_registration_form_phone" name="fos_user_registration_form[phone]" />
        </div>

        <small>We only ship within the US</small>

        <div>
            <button type="submit" id="register-submit-btn" class="btn btn-burnt-orange">Register account</button>
        </div>
        <input type="hidden" id="fos_user_registration_form__token" name="fos_user_registration_form[_token]" value="knrAUCbJNdBKVtkqR57qEzOAExZaqWmleKA4nRBiKeg" />
        </form>
    </div>
</div>

Answer 7

需要在城市的输入，州的选择框和邮政编码的输入（例如the documentation）中添加“表单控件”类。

  static class Program
    {
        [STAThread]
        static void Main()
        {
            string baseAddress = "https://+:81";

            // Start OWIN host 
            using (WebApp.Start<Startup>(url: baseAddress))
            {

                Console.ReadLine();
                Application.EnableVisualStyles();
                Application.SetCompatibleTextRenderingDefault(false);
                Application.Run(new Form1());
            }

        }
    }

Bootstrap 4-带有选择输入的表格行未正确对齐

7 个答案: