Html 在引导中将窗体向左对齐

我正在创建一个联系人页面，其当前外观如下：

但我希望它看起来像这样：

我如何做到这一点？我在bootstrap网站上浏览了一下，但没有找到一个好的例子。 我刚开始使用bootstrap，所以我对它完全陌生

我现在的代码：

    <div class="container">
    <form class="well form-horizontal" action=" " method="post"  id="contact_form">
        <fieldset>

        <!-- Form Name -->
        <legend style="font-weight: bold;">Neem contact op</legend>
        <div class="container" style="margin-bottom: 15px">
        <h4 style="font-weight: bold; "> Gegevens</h4>
            <span style="font-weight: bold;">Naam:</span> test<br>
            <span style="font-weight: bold;">Woonplaats:</span> test <br>
            <span style="font-weight: bold;">Adres:</span> test <br>
            <span style="font-weight: bold;">Postcode:</span> test <br>
            <span style="font-weight: bold;">Telefoon:</span> test <br>
        </div>  
        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label">Voornaam</label>  
          <div class="col-md-4 inputGroupContainer">
          <div class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
          <input  name="first_name" placeholder="First Name" class="form-control"  type="text">
            </div>
          </div>
        </div>

        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label" >Achternaam</label> 
            <div class="col-md-4 inputGroupContainer">
            <div class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
          <input name="last_name" placeholder="Last Name" class="form-control"  type="text">
            </div>
          </div>
        </div>

        <!-- Text input-->
               <div class="form-group">
          <label class="col-md-4 control-label">E-Mail</label>  
            <div class="col-md-4 inputGroupContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
          <input name="email" placeholder="E-Mail Address" class="form-control"  type="text">
            </div>
          </div>
        </div>


        <!-- Text input-->
        <div class="form-group">
          <label class="col-md-4 control-label">Telefoon</label>  
            <div class="col-md-4 inputGroupContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
          <input name="phone" placeholder="06-12345678" class="form-control" type="text">
            </div>
          </div>
        </div>

        <!-- Text area -->
        <div class="form-group">
          <label class="col-md-4 control-label">Bericht</label>
            <div class="col-md-4 inputGroupContainer">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                    <textarea class="form-control" name="comment" placeholder="Project Description"></textarea>
          </div>
          </div>
        </div>

        <!-- Button -->
        <div class="form-group">
          <label class="col-md-4 control-label"></label>
          <div class="col-md-4">
            <button type="submit" class="btn btn-warning" >Verstuur <span class="glyphicon glyphicon-send"></span></button>
          </div>
        </div>

        </fieldset>
        </form>
        </div>
</div><!-- /.container -->

印楝联络处
壁虎
Naam：测试

WoonPaats:测试

地址：测试

邮政编码：test

Telefoon：测试

沃纳姆
阿切特南
电子邮件
Telefoon
记录
维斯图尔

您可以通过从表单标记中删除class

class horizontal

来完成，并相应地更改您的html，如下面在JSFIDLE中所述

见：

---

根据您的图像，您需要全宽，然后不应使用

col-md-4

，因为这样您的列将占空间的25%（环绕），所以只需做一件事，将其删除，因为默认情况下，它将是您想要的宽度

---

这里有更新。我刚刚删除了所有的

col-md-4

，您得到了结果。

使用下面给出的HTML结构

HTML结构中的一些增强功能可以解决您的问题。 删除所有“col-md-4”并为每个输入添加包装器

<div class="container">
    <form class="well form-horizontal" action=" " method="post" id="contact_form">
        <fieldset>
            <!-- Form Name -->
            <legend style="font-weight: bold;">Neem contact op</legend>
            <div class="container" style="margin-bottom: 15px">
                <h4 style="font-weight: bold; "> Gegevens</h4>
                <span style="font-weight: bold;">Naam:</span> test<br>
                <span style="font-weight: bold;">Woonplaats:</span> test <br>
                <span style="font-weight: bold;">Adres:</span> test <br>
                <span style="font-weight: bold;">Postcode:</span> test <br>
                <span style="font-weight: bold;">Telefoon:</span> test <br>
            </div>
            <div class="clearfix">
                <div class="col-xs-12">
                    <!-- Text input-->
                    <div class="form-group">
                        <label class="control-label">Voornaam</label>
                        <div class="inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                <input name="first_name" placeholder="First Name" class="form-control" type="text">
                            </div>
                        </div>
                    </div>
                    <!-- Text input-->
                    <div class="form-group">
                        <label class="control-label">Achternaam</label>
                        <div class="inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                <input name="last_name" placeholder="Last Name" class="form-control" type="text">
                            </div>
                        </div>
                    </div>
                    <!-- Text input-->
                    <div class="form-group">
                        <label class="control-label">E-Mail</label>
                        <div class="inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                                <input name="email" placeholder="E-Mail Address" class="form-control" type="text">
                            </div>
                        </div>
                    </div>
                    <!-- Text input-->
                    <div class="form-group">
                        <label class="control-label">Telefoon</label>
                        <div class="inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                                <input name="phone" placeholder="06-12345678" class="form-control" type="text">
                            </div>
                        </div>
                    </div>
                    <!-- Text area -->
                    <div class="form-group">
                        <label class="control-label">Bericht</label>
                        <div class="inputGroupContainer">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
                                <textarea class="form-control" name="comment" placeholder="Project Description"></textarea>
                            </div>
                        </div>
                    </div>
                    <!-- Button -->
                    <div class="form-group">
                        <button type="submit" class="btn btn-warning">Verstuur <span class="glyphicon glyphicon-send"></span></button>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
</div>
</div>
<!-- /.container -->

印楝联络处
壁虎
Naam：测试

WoonPaats:测试

地址：测试

邮政编码：test

Telefoon：测试

沃纳姆
阿切特南
电子邮件
Telefoon
记录
维斯图尔

请不要使用与问题无关的标签。如果您想要宽幅标签，请尝试使用col-sm-12或col-sm-9，而不要使用col-md-4，因为这只占屏幕的25%。试着读一点关于bs的知识，然后告诉我你拥有的将解决你的问题：）从这里开始@Robbert请检查这把小提琴对你合适吗？@Leothelion工作过thx！你更好地解决了我的问题，这并没有弄乱底部的页脚，并正确对齐所有内容！对不起，Rahul有一个更好的awnser，你的awnser把我的页脚弄乱了。但是谢谢你的帮助！别担心。。这取决于你。