javascript - 使用平板电脑大小的屏幕时尝试删除额外的空间

Question

我刚刚完成了另一个前端网站。这次学习了如何访问twitch api，学到了很多东西。但是我仍然在为 bootstrap 的工作原理而苦苦挣扎。我认为问题与我如何使用网格系统有关。

网站在中型屏幕和大屏幕上看起来都很棒。它甚至在手机大小的屏幕上也能很好地工作。但是平板电脑大小，应用程序左侧有很多空白区域(紫色区域)，我不知道如何解决它，有什么提示吗？谢谢! http://codepen.io/freefora11/full/GodeRM/

<div class="container">
  <div class="twitch">
    <h1 class="text-center"> Twitch API App</h1>
  </div>
  <div class="col-md-3 col-md-offset-1 col-xs-3 col-xs-offset-1 buttons">
    <div class="col-md-6 col-xs-6 show">
      <p>All</p>
      <p style="color:#A2FE1F">Online</p>
      <p style="color:#DA2E3E">Offline</p>
    </div>
    <div class="col-md-6 col-xs-6 but">
      <button type="button" class="btn btn-sm btn-default" id="all">show</button>
      <button type="button" class="btn btn-sm btn-success" id="on">show</button>
      <button type="button" class="btn btn-sm btn-danger" id="off">show</button>
    </div>
  </div>
  <div class="content col-md-3 col-xs-1">

  </div>


</div>
</div>
</div>

Answer 1

实际上，您在此处使用的整个网格结构都是不正确的。我已经在下面提供了正确的结构，在此之前我会给出一些技巧来让它变得更好。

1) 始终建议将所有 .col- 类包装在 class="row" 中。

2) 在.col-md-x中，特定设备(lg/md/sm/xs)的x值的加法默认为12。在您的情况下，外部 .col-md- 加起来只有 6。class="col-md-3"+ class="col-md-3"。我在下面提供了更新后的结构。

3) 删除 col-md-offset-1 和 col-xs-offset-1。

4) 从样式中的 buttons 类中删除 margin-left: 200px;。

<div class="container">
  <div class="twitch">
    <h1 class="text-center"> Twitch API App</h1>
  </div>
  <div class="row">
  <div class="col-md-2 col-lg-2"></div>
  <div class="col-md-2 col-lg-2 col-sm-3 buttons">
    <div class="col-md-6 col-xs-6 show">
      <p>All</p>
      <p style="color:#A2FE1F">Online</p>
      <p style="color:#DA2E3E">Offline</p>
    </div>
    <div class="col-md-6 col-xs-6 but">
      <button type="button" class="btn btn-sm btn-default" id="all">show</button>
      <button type="button" class="btn btn-sm btn-success" id="on">show</button>
      <button type="button" class="btn btn-sm btn-danger" id="off">show</button>
    </div>
  </div>
  <div class="content col-md-6 col-lg-6 col-sm-6">
     <!--The details content comes here-->
  </div>
  <div class="col-md-2 col-lg-2 col-sm-2"></div>
  </div>
</div>

请注意，这仅在您需要的平板电脑/小型设备之前具有响应性。对于移动设备，您需要按照自己的方式添加和调整所有 -xs- 类。