Question

我正在使用bootstrap编写我的第一个webapp，并且有两个关于表单布局的问题。它目前看起来像： Search form 我想改变一些想法，但在引导程序的所有选项之间我找不到正确的。

如何将“包含子类型”复选框与对象类型文本框对齐？
“选择一个选项”标签远离单选按钮而不是其他输入的标签。如何使（垂直）距离合适？我在标签上尝试了id =“search_comb”的几件事并且对于form-group和radiobutton div的=“search_comb”。
如何对齐右下角的提交按钮？

我一直在几个输入标签上试验class =“form-control”，但是没有完全理解这些概念。也许一个好的参考指南有帮助。到目前为止，我只找到了非常好的教程，但是在尝试使用自己的代码解决问题时，它们并不是非常有用。

我的代码目前看起来像：

<body>
    <div class="container-fluid">
        <h1>Search my database</h1>
            <form class="form-vertical" action="/search/" method="post">
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="relation">Relation:</label>
                            <select class="form-control" id="relation1">
                                <option>is part of</option>
                                <option>is alternative for</option>
                                <option>is a kind of</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="object1">Object:</label>
                            <input type="text" class="form-control" id="object1">
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="checkbox">
                            <label><input type="checkbox" value="subtype_cbx1">Including subtype</label>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="search_comb">Select an option:</label>
                            <div class="radio">
                                <label>
                                    <input type="radio" name="search_combination" id="search_comb">
                                    Option1
                                </label>
                            </div>
                            <div class="radio">
                                <label class="radio">
                                    <input type="radio" name="search_combination">
                                    Option2
                                </label>
                            </div>
                        </div>
                    </div>    
                    <div class="col-sm-6">
                        <input type="submit" action="search" value="Search">
                    </div>
                </div>

            </form>
    </div>
</body>

如何标记放置和垂直对齐

0 个答案: