Question

我似乎无法弄清楚为什么会这样。

我的代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

    <div class="container-fluid">
    <div style="text-align:center"><a href="http://www.leagueofassassins.co.uk">
            <img class="banner" src="../images/logos/Logo%20for%20LoA.png"></a>
    </div>

    <!--Navbar Begin-->
    <nav class="navbar-static-top navbar-inverse navbar-inner navbar-custom" role="navigation">

        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--<a class="navbar-brand" href="#"></a>-->
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="http://www.leagueofassassins.co.uk">Home</a></li>
                    <li><a href="http://www.leagueofassassins.co.uk/info/information.html">Info</a></li>
                    <li><a href="http://www.leagueofassassins.co.uk/roster/">Roster</a></li>
                    <li><a href="https://www.warcraftlogs.com/guilds/81546/">WarcraftLogs</a></li>
                    <li class="active"><a href="http://www.leagueofassassins.co.uk/apply/">Apply</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--Navbar End-->

出于某种原因，它在垂直时会在右侧留下一个大区域，但在我的手机处于水平位置时会起作用。我在下面列出了图片。任何帮助都会被贬低。我希望它是全屏宽度。

请用溢出的文字忽略底部的井。那不是问题。

请参阅http://www.leagueofassassins.co.uk/apply/

Answer 1

它看起来像你的＆＃34;主窗格＆＃34; cals有60％的宽度，尝试删除它，它应该工作正常。

CSS Class

.main-pane {
margin-top: 1%;
margin-bottom: 5%;
width: 60%;  // remove this line
height: 100%;
}

Answer 2

It turns out that I'd accidentally missed some padding on either side of .container-custom and the bottom content was spilling over causing the page to need to be widened. It works now. Thanks.

我有一个容器流体，它不会在整个屏幕上扩展，即使它应该是

2 个答案: