jquery - Bootstrap 水平表格和表格的问题

Question

当我将一个表格放入类为“form-horizo​​ntal”的 Bootstrap 表格中时，我会遇到一些奇怪的行为，即与标题相比，表格内容最终向右移动了 1 个单元格。

<div class="container">
  <div class="container-fluid panel-heading">
    <div class="row">
      <div class="col-md-12">
        <h1>TITLE</h1>
      </div>
    </div>
  </div>

  <form action="some_action" class="form-horizontal" method="post" role="form">
    <div class="form-group">
      <label class="col-md-2 control-label" for="Name">Name</label>
      <div class="col-md-10">
        <input type="text" value="" name="Name">
      </div>
    </div>
    <div class="form-group">
      <div class="">
        <fieldset class="border">
          <legend>
            Events
          </legend>
          <table id="eventList" class="table table-striped">
            <thead>
              <tr class="event-header">
                <th>One</th>
                <th>Two</th>
              </tr>
            </thead>
            <tbody>
              <tr id="template" class="event-record form-group form-inline">
                <td>
                  <input class="form-control" id="One" name="One" type="text" value="">
                </td>
                <td>
                  <input class="form-control" id="Two" name="Two" type="text" value="">
                </td>
              </tr>
            </tbody>
          </table>
          <br>
        </fieldset>
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-12">
        <button class="btn btn-default" type="reset">Clear All</button>
        <button class="btn btn-default" type="submit">Save</button>
      </div>
    </div>
  </form>
</div>

我创建了一个 fiddle here

Hack 是在标题中添加一个额外的“th”单元格，但它并不完美，因为布局不是很准确。

删除 form-horizo​​ntal 也解决了这个问题，但是这会丢失表格之外需要它的其他元素的样式。

Answer 1

是因为你给了类.form-group ，它改变了 display至 block .如果请删除相关类，就可以了。给一个 <div>封装两者。