在引导程序中将表单向左对齐答案

【问题标题】：Align form to the left in bootstrap在引导程序中将表单向左对齐
【发布时间】：2022-01-10 02:35:29
【问题描述】：

我正在创建一个当前如下所示的联系页面：

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

我该如何做到这一点？我在引导网站上环顾四周，但找不到一个很好的例子。我刚开始使用引导程序，所以我对它完全陌生。

我现在的代码：

    <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 -->

【问题讨论】：

请不要使用与问题无关的标签。
如果您希望它们具有较宽的宽度，请尝试使用 col-sm-12 或 col-sm-9 而不是 col-md-4，因为它只占用 25% 的屏幕。尝试阅读一些关于 bs 的内容，然后相信我会解决你的问题 :) 从这里开始tutorialspoint.com/bootstrap/index.htm
@Robbert 请检查这个小提琴jsfiddle.net/gmbg7z7y/1你可以吗？
@Leothelion 辛苦了！

标签： html css twitter-bootstrap

【解决方案1】：

使用下面给出的 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 -->

【讨论】：

你更好地解决了我的问题，这并没有弄乱底部页脚并正确对齐所有内容！

【解决方案2】：

根据您的图像，您需要全宽，那么您不应该使用col-md-4，因为这样您的列将位于 25%（环绕）的空间中，因此只需做一件事将它们删除，因为默认情况下它将在你想要的宽度..

这里更新fiddle。我刚刚删除了所有col-md-4，你得到了你的结果。

【讨论】：

抱歉，Rahul 有一个更好的遮阳篷，你的遮阳篷在表格下弄乱了我的页脚。但是谢谢你的帮助！
不用担心.. 取决于你。

【解决方案3】：

您可以通过从表单标签中删除类 class-horizontal 并相应地更改您的 html，在 jsFiddle 中描述如下

见： jsFiddle

【讨论】：