Html 引导是由于高度像素的轻微变化而起作用的_Html_Css_Twitter Bootstrap

Html 引导是由于高度像素的轻微变化而起作用的

html css twitter-bootstrap

Html 引导是由于高度像素的轻微变化而起作用的,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我使用bootstrap实现了一个简单的响应性设计。然而，我今天移动了电脑，打算继续我的项目，我的设计出了问题（见附图）。我已经测试过了，看我是否改变了宽度，它是否会起作用；没有。然后我玩了一下浏览器的高度，看看它是否有，是的，它确实出现了问题，并且显示不正确。我对引导还比较陌生，但我不确定是什么原因导致了这种情况，或者可能是我的计算机端的某些东西造成的。我使用Chrome进行两种查看。我还用Edge进行了测试，结果显示正确查看右上角的查看端口这就是它应该看起来的样子这就是我在更改分辨率

我使用bootstrap实现了一个简单的响应性设计。然而，我今天移动了电脑，打算继续我的项目，我的设计出了问题（见附图）。我已经测试过了，看我是否改变了宽度，它是否会起作用；没有。然后我玩了一下浏览器的高度，看看它是否有，是的，它确实出现了问题，并且显示不正确。我对引导还比较陌生，但我不确定是什么原因导致了这种情况，或者可能是我的计算机端的某些东西造成的。我使用Chrome进行两种查看。我还用Edge进行了测试，结果显示正确

查看右上角的查看端口

这就是它应该看起来的样子

这就是我在更改分辨率时得到的结果

根据请求，代码的另一部分通过JS加载

    <body>
    <div id="interfaceNaviation" style="position:relative;top:0;left:0;right:0;background-color:green;">
        <div class="navBar"><span class="navLink"><a href="../">Home</a></span> <span class="navLink"><a href="../PRESENTATION/">Presentation</a></span> <span class="navLink"><a href="../SCHEDULES/">Schedules</a></span> <span class="navLink"><a href="../DISPLAY/">Display</a></span></div>
        <br>
        <div id="loginInfo">
            <button id="signinButton" type="button" class="btn btn-primary btn-fixed-width navbar-btn" style="visibility: visible; display: inline;">
                Sign in <i class="fa fa-white fa-sign-in icon-right"></i>
            </button>
            <a href="javascript:void(0);" id="signoutButton" class="navbar-nav" style="visibility: hidden; display: none;">
                <span>Sign Out</span>
                <i class="fa fa-blue-custom fa-sign-out"></i>
            </a>
            <div style="display:inline;" id="signinText">Authorize requests using OAuth 2.0:</div>
        </div>
    </div>
    <div id="pres_interface" class="container-fluid" style="height:90%;">
        <div id="pres_options" class="row" style="height:5%;">
            <div id="add-placeholder" class="col-xs-2"><button id="btn_add-placeholder" class="btn btn-success fa-1.2x">Add Placeholder</button></div>
        </div>
        <!--style="left:0px;width:20%;height:100%;position:relative;"-->
        <div id="pres_editor_panel" class="row" style="height:95%">
            <div class="col-xs-2">
                <div id="editor_display">
                    <div id="placeholderContainer"><span class="header fa-1.2x">Placeholders</span></div>
                    <li><span name="placeholders-change" class="fa-1.2x" data-id="ph1">ph1 <i data-id="void" class="fa fa-trash-o"></i></span></li>
                    <li><span name="placeholders-change" class="fa-1.2x" data-id="ph2">ph2 <i data-id="void" class="fa fa-trash-o"></i></span></li>
                    <li><span name="placeholders-change" class="fa-1.2x" data-id="ph04">ph04 <i data-id="void" class="fa fa-trash-o"></i></span></li>
                    <li><span name="placeholders-change" class="fa-1.2x" data-id="Test">Test <i data-id="void" class="fa fa-trash-o"></i></span></li>
                    <li><span name="placeholders-change" class="fa-1.2x" data-id="Test1">Test1 <i data-id="void" class="fa fa-trash-o"></i></span></li>
                </div>
            </div>
            <!-- style="width:79.9%;height:100%" -->
            <div class="col-xs-10 fa-padless-left">
                <iframe id="fake_view" src="fake_view.html" style="width:100%;height:100%;border:1px solid #081D79;"></iframe>
            </div>
        </div>
    </div>
    <div id="pres_options-lower" style="background-color:purple;left:0;right:0;text-align:right;bottom:0;">
        <button>Restore</button>&nbsp;
        <button>Save</button>&nbsp;
        <button>Publish</button>
    </div>
    <div id="window_mask" class="mask hidden"></div>
    <div id="popup_display" class="hidden"></div>
    <div id="sub_popup_display" class="hidden"></div>
    <div id="sub_window_mask" class="mask hidden"></div>

</body>




登录
使用OAuth 2.0授权请求：
添加占位符
占位符
ph1
ph2
ph04
试验
测试1
恢复
拯救
发表

这是我的主体代码，未经JS编辑：

<body>
    <div id="interfaceNaviation" style="position:relative;top:0;left:0;right:0;background-color:green;">
        <div class="navBar"><span class="navLink"><a href="../">Home</a></span> <span class="navLink"><a href="../PRESENTATION/">Presentation</a></span> <span class="navLink"><a href="../SCHEDULES/">Schedules</a></span> <span class="navLink"><a href="../DISPLAY/">Display</a></span></div> 
        <br /><div id="loginInfo">
            <button id="signinButton" type="button" class="btn btn-primary btn-fixed-width navbar-btn">
                Sign in <i class="fa fa-white fa-sign-in icon-right"></i>
            </button>
            <a href="javascript:void(0);" id="signoutButton" class="navbar-nav">
                <span>Sign Out</span>
                <i class="fa fa-blue-custom fa-sign-out"></i>
            </a>
            <div style="display:inline;" id="signinText"></div>
        </div>
    </div>
    <div id="pres_interface" class="container-fluid" style="height:90%;" >
      <div id="pres_options" class="row" style="height:5%;">
        <div id="add-placeholder" class="col-xs-2"><button id="btn_add-placeholder" class="btn btn-success fa-1.2x">Add Placeholder</button></div>
      </div>
      <!--style="left:0px;width:20%;height:100%;position:relative;"-->
          <div id="pres_editor_panel" class="row" style="height:95%">
            <div class="col-xs-2">
                <div id="editor_display" >
                    &nbsp;
                </div>
            </div>
            <!-- style="width:79.9%;height:100%" -->
            <div class="col-xs-10 fa-padless-left">
                <iframe id="fake_view" src="fake_view.html" style="width:100%;height:100%;border:1px solid #081D79;" ></iframe>
            </div>
          </div>
     </div>
    <div id="pres_options-lower" style="background-color:purple;left:0;right:0;text-align:right;bottom:0;">
        <button>Restore</button>&nbsp;
        <button>Save</button>&nbsp;
        <button>Publish</button>
    </div>
    <div id="window_mask" class="mask hidden"></div>
    <div id="popup_display" class="hidden"></div>
    <div id="sub_popup_display" class="hidden"></div>
    <div id="sub_window_mask" class="mask hidden"></div>
</body>




登录
添加占位符
恢复
拯救
发表

谢谢你的帮助！我现在对此感到困惑。

您仍然没有一个最小的、完整的和可验证的示例。这些不是我的要求。所要求的是对每张海报的要求。请使用上面的链接。@hungerstar我提供了所有相关信息。你想让我把整个引导CSS文件给你看吗？我的CSS文件与结构无关；因此，它们是不需要的，我正试图将其最小化。我知道您不认为您的代码的其余部分是需要的，但社区的其他人会希望看到它。毕竟，是你在寻求帮助。几小时后我会回来看看你没有MCVE的情况。是每个人都将尝试从提供的代码创建的内容。