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

我刚刚完成了另一个前端网站。这次我学会了如何访问TwitchAPI，学到了很多。但我仍在为引导的工作原理而挣扎。我想问题在于我如何使用网格系统

该网站在中等大小的屏幕和大屏幕上看起来都很棒。它甚至可以在手机大小的屏幕上正常工作。但是如果是平板电脑大小，应用程序左侧有很多空白（紫色），我想不出如何修复它，有什么提示吗？谢谢

TwitchAPI应用程序
全部

在线

离线

显示
显示
显示

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

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） 删除左边的

边距：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>


TwitchAPI应用程序
全部

在线

离线

显示
显示
显示

请注意，只有在您需要平板电脑/小型设备时，才会做出响应。对于移动设备，您需要按自己的方式添加和调整所有
-xs-
类。
感谢您提供的提示，确保我的所有网格系统类都应使用“行”。我不知道它们的总和也必须达到12。我完全忘了我给按钮留了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>