bootstrap 3.3.7如何让移动视图中的列无间隙地堆叠在一起?

时间:2018-02-08 11:17:57

标签: css twitter-bootstrap-3

我在启动移动视图时遇到问题,列堆叠在一起但它们之间存在间隙。我怎样才能摆脱这些空白,以便在一栏中显示它们?

我的代码

<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>

1 个答案:

答案 0 :(得分:0)

在这种情况下不要使用偏移量。最好为表格制作<div v-for="post in posted"> <img :src="'{{Config::get('app.url')}}/sudan2018book/public/img/' + post.user.pic" v-if="!!post.user"> </div> ,这会将您的表格置于图像的中心。 假设你正在寻找什么。

&#13;
&#13;
position:absolute
&#13;
&#13;
&#13;