Question

当我将表格放入带有＆＃34; form-horizontal＆＃34;类的引导程序表单时，我得到一些奇怪的行为，其中表格内容与标题相比最终向右移动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

哈克是为了增加一个额外的＆＃39;标题中的单元格，但它并不完美，因为布局不是很精确。

删除form-horizontal也可以修复问题，但随后会丢失表格外部需要它的其他元素的样式。

Answer 1

这是因为您已经提供了课程.form-group，这会将display更改为block。如果你请删除相关的课程，那就没问题了。将它赋予<div>封装两者。

引导水平表格和表格的问题

1 个答案: