bootstrap 3 - 响应表布局到每个td在新行上的位置

Question

我有一张表，这是一项调查，因此它有一个thead的答案类型和一个带有问题和单选按钮的tbody。我想要发生的是，当用户将屏幕缩小到移动大小时，它会改变表格的外观，所以不是将所有内容都水平，而是在一行显示问题，并在新行上显示每个单选按钮。这样的事情：

我怎样才能最轻松地使用下面的代码？我一直试图让它响应，但它不起作用。

<table class="table row" id="10878">
            <thead>
                <tr class="">
                    <th></th>
                        <th class="matrixOptions">Very likely</th>
                        <th class="matrixOptions">Not Likely</th>
                </tr>
            </thead>
            <tbody class="container">
                <tr class="matrixList row">
                    <td class="matrixQuestion col-xs-12 col-sm-6">Would you work for a startup?</td>
                            <td class="matrixOption col-xs-12">
                                <div class="MatrixResults" style="display: none;" id="22671">50%</div>
                                                            <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" checked="" name="10879" id="22671" type="radio"><i></i></label></div>
                        </td>
                            <td class="matrixOption col-xs-12">
                                <div class="MatrixResults" style="display: none;" id="22672">50%</div>
                                                            <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" name="10879" id="22672" type="radio"><i></i></label></div>
                        </td>
                </tr>
                <tr class="matrixList row">
                    <td class="matrixQuestion col-xs-12 col-sm-6">12345</td>
                            <td class="matrixOption col-xs-12">
                                <div class="MatrixResults" style="display: none;" id="22673">100%</div>
                                                            <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" checked="" name="10880" id="22673" type="radio"><i></i></label></div>
                        </td>
                            <td class="matrixOption col-xs-12">
                                <div class="MatrixResults" style="display: none;" id="22674">0%</div>
                                                            <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" name="10880" id="22674" type="radio"><i></i></label></div>
                        </td>
                </tr>
            </tbody>
        </table>

有什么想法？谢谢！

Answer 1

最简单的方法是简单地将每个表格元素display: block置于神奇的Bootstrap移动宽度768px。块级元素的默认width为100%，因此每个元素将占用一个完整的行并堆叠在一起。

这可以在以下内容中看到：

@media screen and (max-width: 768px) {
  table, thead, tr, td {
    display: block;
  }
}

<table class="table row" id="10878">
  <thead>
    <tr class="">
      <th></th>
      <th class="matrixOptions">Very likely</th>
      <th class="matrixOptions">Not Likely</th>
    </tr>
  </thead>
  <tbody class="container">
    <tr class="matrixList row">
      <td class="matrixQuestion col-xs-12 col-sm-6">Would you work for a startup?</td>
      <td class="matrixOption col-xs-12">
        <div class="MatrixResults" style="display: none;" id="22671">50%</div>
        <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" checked="" name="10879" id="22671" type="radio"><i></i></label></div>
      </td>
      <td class="matrixOption col-xs-12">
        <div class="MatrixResults" style="display: none;" id="22672">50%</div>
        <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" name="10879" id="22672" type="radio"><i></i></label></div>
      </td>
    </tr>
    <tr class="matrixList row">
      <td class="matrixQuestion col-xs-12 col-sm-6">12345</td>
      <td class="matrixOption col-xs-12">
        <div class="MatrixResults" style="display: none;" id="22673">100%</div>
        <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" checked="" name="10880" id="22673" type="radio"><i></i></label></div>
      </td>
      <td class="matrixOption col-xs-12">
        <div class="MatrixResults" style="display: none;" id="22674">0%</div>
        <div style="" class="checkbox i-checks matrixInput radioMatrix"><label><input class="form-control" name="10880" id="22674" type="radio"><i></i></label></div>
      </td>
    </tr>
  </tbody>
</table>