html - Bootstrap 显示在我的表单上并不完美

Question

我对 Bootstrap 表单有一点疑问。

代码

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