Question

我有一个私人视频网站主要针对我的家庭网络和桌面计算机，但是，该网站是以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＆＃34; boostrap＆＃34;对于大小调整，bootstrap有一个网格系统，如果你按照网格系统，你的网站将正常工作。请阅读：w3傻瓜有一个很好的起点。 http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

此外，在查看您的代码后，我注意到您将col-4设置为10％宽度，它不会像那样工作。如果您使用最常见的12列网格，则col-4更像是33％。这意味着通过将col-4设置为10％，你已经超越了自举的关键功能，这就是为什么它不适合你。

Answer 2

在您的示例中，最后一个div应为</nav>。与container＆gt;内的此样式标记一起使用style="width:66%"。我先从这些事情开始。

<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>
  </div><!--CHANGE TO NAV-->

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

2 个答案: