Bootstrap代码结构

Question

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

1.我们在哪里将表单元素放在我们的html中？它是否必须在表格的开头？

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

3.我必须将div.row然后div.form-group放在彼此里面吗？这是最好的做法，还是我可以直接使用form-group而不用div.row作为父类？

4.如果无法将其作为div进行操作，如何控制表格内的td大小？我在表单中使用了一个表格，我需要包含datepicker的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-XS改变-... COL-SM -... COL-MD -... COL-LG -...

Bootstrap grid system

没有必要使用<table>为此。作为父母，始终使用<div class="row">。比col类更改宽度。类行使左边距和右边距右边15px：

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