Question

我不知道Bootstrap。你能指导我如何使一个表响应。如何使这个身体响应？

    <body style="background-color:#F1F3F6 ">
        <div align="center">
        <h1 style="color:#0083CA;">
            <img src="http://www.kerenel.com/img/banner" alt="Alternate Text" /><br />
            Smart Pond
        </h1>
       <div id="currenttime" style="display:none;">

        </div>
        <table class="">
            <tr>
                <td><div id="water-temperature-container" style="float:left; min-height:400; background-color:red;"></div></td>
                <td><div id="ph-container" style="float:left;background-color:red"></div></td>
                <td><div id="do-container" style="background-color:red"></div></td>
            </tr>
        </table>
        Data recorded at Time : <span id="lblDate"></span>


    </div>
</body>

Answer 1

.table-responsive 类会创建一个响应表。然后，该表将在小型设备上水平滚动（低于768px ）。在大于768像素宽的任何东西上观看时，没有区别：

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Aditya</td>
        <td>Singhal</td>
        <td>35</td>
      </tr>
      <tr>
        <td>Indroneil</td>
        <td>Krishnan</td>
        <td>20</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

Answer 2

https://jsfiddle.net/8q5e4u8q/

通过在.table中包装任何.table-responsive来创建自适应表格，使其在小型设备上水平滚动（在768px下）。查看宽度大于768px的任何内容时，您将看不到这些表格中的任何差异。

您需要添加以下类：

table
table-responsive

<强>代码

<table class="table table-responsive">
  <tr>
    <td><div id="water-temperature-container" style="float:left; min-height:400; background-color:red;" ></div></td>
    <td><div id="ph-container" style="float:left;background-color:red"></div></td>
    <td><div id="do-container" style="background-color:red"></div></td>
  </tr>
</table>

<强>段

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-responsive">
  <tr>
    <td>
      <div id="water-temperature-container" style="float:left; min-height:400; background-color:red;"></div>
    </td>
    <td>
      <div id="ph-container" style="float:left;background-color:red"></div>
    </td>
    <td>
      <div id="do-container" style="background-color:red"></div>
    </td>
  </tr>
</table>

＆＃13;

无法使用Bootstrap使表响应

2 个答案: