Question

我正在使用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>

这是我的正文代码，没有通过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>

感谢您的帮助！我现在很难过。

Bootstrap从轻微的高度像素变化起作用

0 个答案: