Question

即时创建一个联系页面，目前看起来像这样：

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

我如何做到这一点？我在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 -->

Answer 1

使用下面给出的 HTML结构。

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

SendMessage((IntPtr)excel.Hwnd, 0x10, IntPtr.Zero, IntPtr.Zero);

Answer 2

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

参见： jsFiddle

Answer 3

根据你的图片，你需要全宽，那么你不应该使用col-md-4，因为你的列将占据空间的25％（周围）所以只需做一件事就可以删除它们，因为默认它会宽度你想要的..

此处已更新fiddle。我刚删除了所有col-md-4，你就得到了结果。

在引导程序中将表单对齐到左侧

3 个答案: