引导显示在我的表单上并不完美

Question

我有一个引导表单的小问题。

代码

<form class="<!-- form-horizontal --> form-inline text-left" id="form"  action="SubmitMainForm" method="post">
    <div class="form-group col-xs-12">
        <label class=" col-xs-1" for="test1">test1</label>
        <div class="col-xs-5">
            <input class="form-control " type="text" name="test1" id="test1">
        </div>
        <label class=" col-xs-1" for="test2">test2</label>
        <div class="col-xs-5">
            <input class="form-control " type="text" name="test2" id="test2">
        </div>
    </div>  
    <div class="form-group col-xs-12">
        <label for="description" class="col-xs-1">Description</label>
        <textarea class=" col-xs-11" rows="6" name="ta_description" id="ta_description"></textarea>
    </div>
    <div class="form-group col-xs-12">
        <label for="description" class="col-xs-1">Description</label>
        <textarea class=" col-xs-5" rows="6" name="ta_description"  id="ta_description"></textarea>
        <label for="description" class="col-xs-1">Description</label>
        <textarea class=" col-xs-5" rows="6" name="ta_description"  id="ta_description"></textarea>
    </div>

    <!-- test with no div for the input control (not working) -->
    <!--  
    <div class="form-group col-xs-12">
        <label class=" col-xs-1" for="test1">test1</label>
        <input class="form-control col-xs-5" type="text" name="test1" id="test1">
        <label for="description" class="col-xs-1">Description</label>
        <textarea class=" col-xs-5" rows="6" name="ta_description"  id="ta_description"></textarea>
    </div>
    -->
</form>

如您所见，第一行有一个小故障。 控件未正确对齐到下一行控件。 我正在使用 Bootstrap 3.3.4。

我怎样才能把它修好让它看起来很可爱？

提前谢谢。

Answer 1

这应该可以完成工作。请务必遵循 Bootstrap 站点上的文档。你可以解决这个问题:)

这是我为你想出的。将此与您当前拥有的进行比较，以便您了解哪里出错了。

<div class="container">
<form class="form-horizontal" id="form" action="SubmitMainForm" method="post">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <div class="form-group">
                <label class="control-label col-sm-4" for="test1">test1</label>
                <div class="col-sm-8">
                    <input class="form-control" type="text" name="test1" id="test1">
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6">
            <div class="form-group">
                <label class="control-label col-sm-2" for="test2">test2</label>
                <div class="col-sm-10">
                    <input class="form-control" type="text" name="test2" id="test2">
                </div>
            </div>
        </div>
    </div>


    <div class="form-group">
        <label for="description" class="control-label col-sm-2">Description</label>
        <div class="col-xs-12 col-sm-10">
            <textarea class="form-control" rows="6" name="ta_description" id="ta_description"></textarea>
        </div>
    </div>


    <div class="form-group">
        <label for="description" class="control-label col-sm-2">Description</label>
        <div class="col-xs-12 col-sm-10">
            <textarea class="form-control" rows="6" name="ta_description" id="ta_description"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label for="description" class="control-label col-sm-2">Description</label>
        <div class="col-xs-12 col-sm-10">
            <textarea class="form-control" rows="6" name="ta_description" id="ta_description"></textarea>
        </div>
    </div>

</form>

Answer 2

删除表单类中的注释并使用任何一个类名： 我编辑代码试试

<form class="form-horizontal col-xs-offset-2" id="form"  action="SubmitMainForm" method="post">
    <div class="form-group">
        <label class=" col-xs-1" for="test1">test1</label>
        <div class="col-xs-3">
            <input class="form-control " type="text" name="test1" id="test1">
        </div>
        <label class=" col-xs-1" for="test2">test2</label>
        <div class="col-xs-3">
            <input class="form-control " type="text" name="test2" id="test2">
        </div>
    </div>


    <div class="form-group">
        <label for="description" class="col-xs-1">Description</label>
         <div class="col-xs-5">
        <textarea  rows="3" cols="30" name="ta_description" id="ta_description"></textarea>
         </div>
    </div>


    <div class="form-group">
        <label for="description" class="col-xs-1">Description</label>
         <div class="col-xs-3">
        <textarea  rows="3" cols="30" name="ta_description"  id="ta_description"></textarea>
         </div>
        <label for="description" class="col-xs-1">Description</label>
         <div class="col-xs-3">
             <textarea rows="3" cols="30" name="ta_description"  id="ta_description"></textarea>
         </div>
    </div>

   </form>