Question

我有一个表格，仅用于表格布局，而不是表格数据和表格。我试图让它响应。由于它只是用于布局，我希望在小型设备中只有1列，在中型设备中只有2列，原来我的表有4列，如：原始表

<div class="table-responsive">
    <table class = "table">
        <tr>
            <td>First Name: </br><input type="text" id= "txtFname"/><td>
            <td>Middle Name: </br><input type="text" id= "txtMname"/><td>
            <td>Last Name: </br><input type="text" id= "txtLname"/><td>
            <td>Date Of Birth: </br><input type="text" id= "txtDob"/><td>
        </tr>
    </table>
</div>

在小型设备中它应该是：

<div>
    <table>
        <tr><td>First Name: </br><input type="text" id= "txtFname"/><td></tr>
        <tr><td>Middle Name: </br><input type="text" id= "txtMname"/><td></tr>
        <tr><td>Last Name: </br><input type="text" id= "txtLname"/><td></tr>
        <tr><td>Date Of Birth: </br><input type="text" id= "txtDob"/><td></tr>
    </table>
</div>

中型设备中的2列有没有办法实现这一目标，请建议。我知道他可以实现，但是可以用吗？

Answer 1

使用表格进行布局并不是一个好主意。在这种情况下，您可以使用bootstrap的row和col类来获取所需的行为：

  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-3">
      First Name: <br><input type="text" id= "txtFname"/>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      Middle Name: <br><input type="text" id= "txtMname"/>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      Last Name: <br><input type="text" id= "txtLname"/>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-3">
      Date Of Birth: <br><input type="text" id= "txtDob"/>
    </div>
  </div>

这是一个很好的示例：http://www.bootply.com/pDHIPj3NJ3

Answer 2

如果你坚持使用表格的div，那么一个简单的解决方案是使用hidden-xs和visible-xs这样的类：

<div class="table-responsive hidden-xs">
    <table class = "table">
        <tr>
            <td>First Name: </br><input type="text" id= "txtFname"/><td>
            <td>Middle Name: </br><input type="text" id= "txtMname"/><td>
            <td>Last Name: </br><input type="text" id= "txtLname"/><td>
            <td>Date Of Birth: </br><input type="text" id= "txtDob"/><td>
        </tr>
    </table>
</div>

<div class="visible-xs">
    <table>
        <tr><td>First Name: </br><input type="text" id= "txtFname"/><td></tr>
        <tr><td>Middle Name: </br><input type="text" id= "txtMname"/><td></tr>
        <tr><td>Last Name: </br><input type="text" id= "txtLname"/><td></tr>
        <tr><td>Date Of Birth: </br><input type="text" id= "txtDob"/><td></tr>
    </table>
</div>

这将在平板电脑/台式机上显示您的第一个表格，在移动设备上显示第二个表格。

减少小型设备的列数

2 个答案: