Question

我正在创建一个模块，允许用户模拟网页的视图。我有3个按钮来动态更改div大小，它代表网页的视图。

这类似于wordpress自定义，它就是这样，我似乎无法在屏幕更改上复制它。

网页包含在div中，移动设备上的折叠功能无法处理div宽度更改，但在实际调整浏览器窗口大小时可以正常工作。

编辑：

以下是代码：

div包含在

中

<div class="site-builder-container">

好的，所以这个site-builder-container包含我需要在页面内编辑的代码，这里是导航栏的实际代码

<div class="site-builder-container">
<div class="site-builder-header">
    <h2 class="site-builder-header-text">Bloph</h2>
    <span class="site-builder-slogan">Online Blogging Community</span>
</div>
<nav class="navbar">
    <div class="navbar-main">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!--<img src="~/Content/Images/bloph_logo.png" class="header-image-collapse visible-xs" />-->
        </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 class="navbar-menu-link active"><a href="#">Home</a></li>
                <li class="navbar-menu-link"><a href="#">Link</a></li>
                <li class="navbar-menu-link"><a href="#">Link</a></li>
                <li class="navbar-menu-link"><a href="#">Link</a></li>
                <li class="navbar-menu-link"><a href="#">Link</a></li>
                <li class="navbar-menu-link"><a href="#">Link</a></li>
                <li class="navbar-menu-link"><a href="#">Link</a></li>
                <li class="navbar-menu-link"><a href="#">Link</a></li>
                <li class="navbar-menu-link"><a href="#">Link</a></li>
                <li class="navbar-menu-link"><a href="#">Link</a></li>
                <li class="navbar-menu-link"><a href="#">Link</a></li>
                <li class="navbar-menu-link"><a href="#">Link</a></li>
                <li class="navbar-menu-link"><a href="#">Link</a></li>
                <li class="navbar-menu-link"><a href="#">Link</a></li>
                <li class="navbar-menu-link"><a href="#">Link</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

单击按钮时我会更改它并使用脚本：

$(".site-builder-container").animate({ width: "300px" });

如何模拟div的窗口大小

0 个答案: