css - 小于 1920 x 1080 分辨率的 Bootstrap 响应缩放问题

Question

我有一个主要针对我的家庭网络和台式计算机的私有(private)视频网站，但是，该网站是在 1920x1080 分辨率下构建的，所以如果再小一点，该网站看起来就像一场灾难。这是页面的代码。

<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
    <div style="width:66%" class="container">
        <div  class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-collapsible">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="index.php">Network TV</a></li>
            </ul>
        </div>
    </div>
</nav>
<div class="col-md-4 col-md-offset-3" style="width:100%; height=:100%; color:black; margin-top:13%; text-align:center; border: 0">
  <div class="row center-row">
    <div style="width:10%" class="col-md-4"><div style="background-color:transparetn" class="well"><p><u><h4>Season1</h4></u></p></div></div>
      <div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season2<h4></u></p></div></div>
      <div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season3</u></p></div></div>
      <div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season4</h4></u></p></div></div>
      <div style="width:10%"class="col-md-4"><div class="well"><p><u><h4>Season5</h4></u></p></div></div>
    </div>
</div>

我想知道的

我的问题是为什么这不能正确缩小，当屏幕变小时我想调整边距以修复屏幕，但它只是进入一个垂直列表，所有混合我和不正确缩放

Answer 1

如果您使用的是 bootstrap，则不需要所有额外的内联样式，通过为 html 设置内联宽度，您将去掉 bootstrap 用于调整大小的“boostrap”，bootstrap 有一个网格系统，如果您遵循网格系统，您的网站将正常工作。请阅读:w3 fools 为初学者提供了一个很好的起点。 http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

此外，在查看您的代码后，我注意到您将 col-4 设置为 10% 宽度，但它不能像那样工作。如果您使用最常见的 12 列网格，col-4 更像是 33%。这意味着通过将 col-4 设置为 10%，您将超越 bootstrap 的关键功能，这就是它不适合您的原因。