我正在尝试垂直对齐我的引导程序表单

时间:2016-05-10 13:14:51

标签: html css twitter-bootstrap

其他答案没有退出帮助,我试图将表单输入/标签居中。

继承我的实际代码

<div class="col-md-8 col-md-offset-2" id="FormCol">
                <h2 class="formTitle">Let Us Find the Fastest Internet in Your Area!</h2>
                <form class="form-inline" id="contactForm">
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label for="fname">First Name</label>
                            <input class="form-control" id="fname" name="fname" type="text" />
                        </div>
                        <div class="col-md-6 form-group">
                            <label for="lname">Last Name</label>
                            <input class="form-control" id="lname" name="lname" type="text" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label for="pnumber">Phone Number</label>
                            <input class="form-control" id="pnumber" name="pnumber" type="text" />
                        </div>
                        <div class="col-md-6 form-group">
                            <label for="email">Email</label>
                            <input class="form-control" id="email" name="email" type="text" />
                        </div>
                    </div>
                    <div class="col-md-6 form-group">
                        <label for="Zip">Zip</label>
                        <input class="form-control" id="Zip" name="Zip" type="text" />
                    </div>
                </form>
            </div>

这是问题的图像 enter image description here

1 个答案:

答案 0 :(得分:0)

我已经将列更改为12而不是6,这就是为什么你在2列中得到它。

HTML:

            <form class="form-inline" id="contactForm">
                <div class="row">
                    <div class="col-lg-12 col-md-12 form-group">
                        <label for="fname">First Name</label>
                        <input class="form-control" id="fname" name="fname" type="text" />
                    </div>
              </div>
              <div class="row">
                    <div class="col-lg-12 col-md-12 form-group">
                        <label for="lname">Last Name</label>
                        <input class="form-control" id="lname" name="lname" type="text" />
                    </div>
              </div>
              <div class="row">
                    <div class="col-lg-12 col-md-12 form-group">
                        <label for="pnumber">Phone Number</label>
                        <input class="form-control" id="pnumber" name="pnumber" type="text" />
                    </div>
              </div>
                <div class="row">
                    <div class="col-lg-12 col-md-12 form-group">
                        <label for="email">Email</label>
                        <input class="form-control" id="email" name="email" type="text" />
                    </div>
              </div>
                  <div class="row">
                <div class="col-lg-12 col-md-12 form-group">
                    <label for="Zip">Zip</label>
                    <input class="form-control" id="Zip" name="Zip" type="text" />
                </div>
               </div>
            </form>