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。

如何修复它以使其看起来很可爱？

提前thx。

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

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

delegate

我的表单上的bootstrap显示并不完美

2 个答案: