Question

我刚刚完成了另一个前端网站。这次我学会了如何访问抽搐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）从你的风格中的班级margin-left: 200px;中删除buttons。

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

使用平板电脑尺寸屏幕时尝试移除额外空间

1 个答案: