Bootstrap 3.3.7如何将列堆叠在一起而没有移动视图中的空白

Question

我的bootstrap遇到了移动视图上的bootstrap疑问。我如何摆脱差距，以便我可以在一列中显示它们？

我的代码

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-3 white no-gutters">
      <h3>Weather for LA</h3>
    </div>
  </div>
  <div class="row equal">
    <div class="col-sm-2 col-sm-offset-3 white col-equal no-gutters">
      <img src="https://www.w3schools.com/howto/img_fjords.jpg">
      <h3>7 C</h3>
    </div>
    <div class="col-sm-2 col-equal white no-gutters">
      <h4> 01-14-2018</h4>
      <table class="table table-striped table-sm">
        <tr>
          <td>Wind</td>
          <td>
            <?php echo $wind.'m/s'; ?>
          </td>
        </tr>
        <tr>
          <td>Clouds</td>
          <td>
            <?php echo $cloudiness;?>
          </td>
        </tr>
        <tr>
          <td>Pressure</td>
          <td>
            <?php echo $pressure.' '.'hpa';?>
          </td>
        </tr>
        <tr>
          <td>Humidity</td>
          <td>
            <?php echo $humidity.'%';?>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>

Answer 1

在这种情况下不要使用偏移。最好将position:absolute用于表格，这将使您的桌子位于图像的中心。假设这就是您要寻找的。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h3>Weather for LA</h3>
    </div>
  </div>
  <div class="row equal">
    <div class="col-xs-12">
      <img src="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" style="width:100%;">
      <h3>7 C</h3>
    </div>
    <div class="col-xs-12" style="position:absolute; padding:5% 20%;">
      <h4> 01-14-2018</h4>
      <table class="table table-striped table-sm">
        <tr>
          <td>Wind</td>
          <td>
            7 mph
          </td>
        </tr>
        <tr>
          <td>Clouds</td>
          <td>
            Light
          </td>
        </tr>
        <tr>
          <td>Pressure</td>
          <td>
            4 Pa
          </td>
        </tr>
        <tr>
          <td>Humidity</td>
          <td>
            12
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>