ブートストラップは、画面が小さい場合には、新しい行にテーブル列を分割する方法を

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）、画面が大きくなるとすべて同じ行になります。

ブートストラップを使用してこれを行うにはどうすればよいですか？

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>