Bootstrap如何在屏幕较小时将表列分成新行

Question

我有一张像这样的桌子

            <table id="tblFilters" dir="rtl" class="table">
          <thead class="filterHead">
            <tr class="filterRow">
              <th></th>
              <th></th>
              <th></th>
              <th></th>
            </tr>
          </thead>
          <tbody class="filterBody">

            <tr class="filterRow">
              <td>
                <span>הצג מתאריך</span>
                <input type="text" id="dateFrom" />
              </td>
              <td>
                 <span>עד לתאריך</span>
                <input type="text" id="dateTo" />
              </td>
              <td>
                <span>שם לקוח\מספר IQC</span>
                <input type="text" id="iqcNo" />
              </td>
              <td>
                <asp:Button  style="float:left; margin-right:30px;" id="btnRefreshReport" OnClientClick="refreshReport()" runat="server" Text="רענן דוח"/>
              </td>
            </tr>
          </tbody>
        </table>

我希望每个输入（带有文本）在屏幕较小（xs / sm）时对齐自己的行，当屏幕较大时，它们都将在同一行。

如何使用bootstrap执行此操作？

Answer 1

使用媒体查询并将所有单元格设置为阻止以使其中断

参见下面的示例：

@media only screen and (max-width: 767px) {
  .table>tbody>tr>td,
  .table>tbody>tr>th,
  .table>tfoot>tr>td,
  .table>tfoot>tr>th,
  .table>thead>tr>td,
  .table>thead>tr>th {
    display: block;
    min-width: 100%!important;
  }
  .table>thead>tr>th {
    display: none;
  }
  
  .table .filterBody span {
    display:block;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table id="tblFilters" dir="rtl" class="table">
  <thead class="filterHead">
    <tr class="filterRow">
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody class="filterBody">

    <tr class="filterRow">
      <td>
        <span>הצג מתאריך</span>
        <input type="text" id="dateFrom" />
      </td>
      <td>
        <span>עד לתאריך</span>
        <input type="text" id="dateTo" />
      </td>
      <td>
        <span>שם לקוח\מספר IQC</span>
        <input type="text" id="iqcNo" />
      </td>

    </tr>
  </tbody>
</table>