引导程序代码结构

Question

我试图在bootstrap中创建一个表单，我有一些关于正在做的工作的问题。

1.我们将form元素放在html中的什么位置？它一定要在表单的开头吗？

2.我有一个包含重复行的表，建议使用div还是只使用table？

3.我是不是必须把div.row和div.form-group放在一起？这是最佳实践吗?或者我可以直接使用表单组，而不使用div.row作为父级？

4.如果无法作为div来控制表中td的大小，我如何控制它？我在我的表单中使用了一个表，我需要td包含日期选择器比包含注释的td小。

如果有什么不清楚的地方，请告诉我。感谢所有人

Answer 1

<div class="row">
    <div class="col-sm-6">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out
                </label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
    <div class="col-sm-6">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out
                </label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>
    </div>
</div>

这是一个在sm中有两列的示例。其他尺寸(xs，md，lg)不包括在内。也就是说，你可以用xs，md，lg表示整个屏幕的宽度。(等同于例如在lg col-lg-12中)。宽度，您可以使用col...col-sm-...科尔-马德-...科尔-lg-...

Bootstrap grid system

为此，不需要使用<table>。使用always <div class="row">作为父对象。然后更改width.The类的行，使左边距和右边距分别为15px：

<div class="row">
    <div class="col-sm-... col-md-...">
    Content
    </div>
</div>