Question

我使用Bootstrap 3作为相当的简单表，我需要在手机上并排显示4列，如下所示：

<div class="container">
  <div class="row" >
    <div class="col-xs-5" >
      <p style="margin-top: 25%;">A Day in the life of Dror</p>
    </div>
    <div class="col-xs-1">6:30 am<br />7:30 am<br />8:00 am<br />13:00 am<br />16:00 am<br />17:00 am<br />18:00 am<br />20:00 am<br />22:00 am<br />23:00 am</div>
    <div class="col-xs-1">sample img</div>
    <div class="col-xs-5 ">WAKE UP <br />MEETING / BREAKFAST <br />FIRST LESSON / TFILA <br />LUNCH BREAK <br />END OF SCHOOL <br />HOMEWORK TIME<br />DINNER <br />EXTRA CURRICULUM ACTIVITIES<br />ALL RETURN TO BUILDING <br />LIGHT'S OUT</div>
  </div>
</div>

但在手机上它仍然显示堆叠。

Answer 1

代码工作正常，你必须面对一个问题，因为小手机上的填充，也许你可以将填充设置为0px或低于默认值15px的任何其他值对于左侧和右侧，我们需要对该行下的所有列执行此操作。

.remove-padding > div{
  padding:0px;
}

所以我将类remove-padding添加到删除第一级行的所有子节点（即行下的列）的填充。如果这可以解决您的问题，请与我们联系。

JSFiddle Demo

Answer 2

.table {
    border-bottom:0px !important;
}
.table th, .table td {
    border: 1px !important;
}
.fixed-table-container {
    border:0px !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="margin-top:50px";>

<div class="container">
   <table class="table">
  
    <thead>
      <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    
    <tbody>
      <tr>
        <td> </td>
        <td>6:30 am</td>
        <td>sample img</td>
        <td>WAKE UP</td>
      </tr>
      
      <tr>
        <td> </td>
        <td>7:30 am</td>
        <td> </td>
        <td>MEETING / BREAKFAST</td>
      </tr>
      
      <tr>
        <td> </td>
        <td>8:00 am</td>
        <td> </td>
        <td>FIRST LESSON / TFILA </td>
      </tr>
      
       <tr>
        <td> </td>
        <td>13:00 am</td>
        <td> </td>
        <td>LUNCH BREAK</td>
      </tr>
      
       <tr>
        <td> A Day in the life of Dror </td>
        <td>16:00 am</td>
        <td> </td>
        <td>END OF SCHOOL</td>
      </tr>
    	
       <tr>
        <td> </td>
        <td>17:00 am</td>
        <td> </td>
        <td>HOMEWORK TIME</td>
      </tr>

       <tr>
        <td> </td>
        <td>18:00 am</td>
        <td> </td>
        <td>DINNER</td>
      </tr>
		
       <tr>
        <td> </td>
        <td>20:00 am</td>
        <td> </td>
        <td>EXTRA CURRICULUM ACTIVITIES</td>
      </tr>
	      
	  <tr>
        <td> </td>
        <td>23:00 am</td>
        <td> </td>
        <td>ALL RETURN TO BUILDING</td>
      </tr>
      
       <tr>
        <td> </td>
        <td>24:00 am</td>
        <td> </td>
        <td>LIGHT'S OUT</td>
      </tr>
      
  </tbody>
  </table>

</div>
</body>
</html>

Bootstrap 3 col-xs无法按预期工作

2 个答案: