0

我是 bootstrap 的新手，我正在尝试使用 bootstrap、同位素和表达式引擎制作我的响应式网络。我让我的网络在默认引导特性下工作。网页响应不同的屏幕尺寸，但是当页面大小在 480 像素和 768 像素之间时，页面响应不佳，随着滚动图片从菜单中移动。我不想那样，我只想让一切都随着滚动而移动。

像：

卷轴前：

http://imageshack.us/a/img401/1399/t8f.png

滚动后：

http://imageshack.us/a/img5/3548/4kt3.png

在第二张图片中，菜单位于所有图片的后面，我想为所有页面应用滚动，而不仅仅是图片。

另一方面，我想在 480px 下使用 jquery mobile，我不知道我是否需要创建另一个页面，或者如何处理 480px 下的页面

我的一些代码：

<!DOCTYPE html>
    <html lang="{country_code}">
        <head>
            <title>MNT Graphic Design - {if country_code != 'es'}Portfolio{if:else}Portafolio{/if}</title>

            <!-- CSS Declaration -->
            <link rel="stylesheet" type="text/css" href="{site_url}bootstrap/css/bootstrap.css" />
            <link rel="stylesheet" type="text/css" href="{site_url}isotope/css/isotope.css" />
            <link rel="stylesheet" type="text/css" href="{path='styles/main'}" />
        </head>

        <body>
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span3">
                        <div id="well sidebar-nav" data-spy="affix" data-offset-top="30" >
                            <div id="brand">
                                <a href="{site_url}" title="Inicio"><img src="{site_url}mntgd/images/logo.png" alt="MNT Graphic Design Logo" /></a>
                            </div>
                            <div id="navegacion">
                                <ul class="nav nav-list sidenav" id="filters">
                                    <li class="nav-header">{if country_code != 'es'}MENU{if:else}MEN&Uacute;{/if}</li>
                                    <li><a role="menuitem" href="#" data-filter=".img-corp">{if country_code != 'es'}Branding{if:else}Imagen Corporativa{/if}</a></li>
                                    <li><a role="menuitem" href="#" data-filter=".edi">{if country_code != 'es'}Print{if:else}Editorial{/if}</a></li>
                                    <li><a role="menuitem" href="#" data-filter=".web">{if country_code != 'es'}Web Design{if:else}Dise&nacute;o Web{/if}</a></li>
                                    <li><a role="menuitem" href="#" data-filter=".photo">{if country_code != 'es'}Photography{if:else}Fotograf&iacute;a{/if}</a></li>
                                    <li><a role="menuitem" href="#" data-filter="*">{if country_code != 'es'}All Works{if:else}Ver todo{/if}</a></li>
                                    <li class="divider"></li>
                                    <li class="dropdown">
                                        <a id="about-btn" class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">MNT Graphic Design<b class="icon-chevron-right"></b></a>
                                        <ul class="dropdown-menu" role="menu" aria-labelledby="about-btn">
                                            <li role="presentation"><a role="menuitem" href="#" >{if country_code != 'es'}About Us{if:else}Nosotros{/if}</a></li>
                                            <li role="presentation"><a role="menuitem" href="#" data-filter=".profile">{if country_code != 'es'}Profiles{if:else}Perfiles{/if}</a></li>
                                            <li role="presentation"><a role="menuitem" href="#" data-filter=".customers">{if country_code != 'es'}Customers{if:else}Clientes{/if}</a></li>
                                        </ul>
                                    </li>

                                    <li class="dropdown" id="options" >
                                        <a id="sort-btn" class="dropdown-toggle" role="button" data-toggle="dropdown" href="#">{if country_code != 'es'}Order by{if:else}Ordenar{/if}<b class="icon-chevron-right"></b></a>
                                        <ul class="dropdown-menu option-set" id="sort-by" data-option-key="sortBy" role="menu" aria-labelledby="sort-btn">
                                            <li role="presentation"><a role="menuitem" href="#sortBy=original-order" data-option-value="original-order" class="selected">{if country_code != 'es'}Original Order{if:else}Por defecto{/if}</a></li>
                                            <li role="presentation"><a role="menuitem" href="#sortBy=by_project" data-option-value="by_project">{if country_code != 'es'}By Project{if:else}Por Proyecto{/if}</a></li>
                                            <li role="presentation"><a role="menuitem" href="#sortBy=by_date" data-option-value="by_date">{if country_code != 'es'}By Date{if:else}Por Fecha{/if}</a></li>
                                        </ul>
                                    </li>
                                    <li class="divider"></li>
                                    <li><a role="menuitem" href="#" data-filter=".contact">Cont&aacute;ctenos</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="isoenv span9">

                        <div id="container" class="clickable clearfix">

                            <!--
                            {exp:channel:entries channel="portfolio" orderby="random"}
                            <div class="element {channel_short_name} {if sticky == 'y'}pinned{if:else}{/if}" data-project="" data-date="{entry_date format="%Y%m%d"}">
                                <img src="{portfolio_imagen:thumb2}" alt="{title}" />
                            </div>
                            {/exp:channel:entries}
                            -->

                            <div class="element photo pinned"  data-project="palo1" data-date="20130630">
                                <img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="6" />
                            </div>
                            <div class="element photo img-corp big-format"  data-project="palo4" data-date="20100630">
                                <img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="4" />
                            </div>
                            <div class="element photo pinned "  data-project="palo1" data-date="20110630">
                                <img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="5" />
                            </div>
                            <div class="element photo img-corp"  data-project="palo4" data-date="20170630">
                                <img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="9" />
                            </div>
                            <div class="element photo "  data-project="palo4" data-date="19990630">
                                <img src="http://www.mntdesign.co/uploads/imagenes/_thumb2/216346_10151483715269961_2029946791_n.jpg" alt="3" />
                            </div>
                        </div>
                    </div>  
                </div>
        </body>

谢谢你能给我的任何帮助！

编辑：

网页链接 http://www.mntdesign.co/?/main 这是现在的链接，我正在测试，但我找不到这个错误的原因

4

1 回答 1

1

好吧，我想我已经确定了这个问题。希望我还能帮上忙！

问题是滚动时动态添加到菜单中的.affix类（特别是它的）。position:fixed在较大的屏幕上它看起来会很好 - 但是当您使屏幕足够窄（767px 或更小）时，它会触发 Twitter Bootstrap 的移动布局（通过媒体查询）。这是上述内容position:fixed开始弄乱您的页面的时候。

移动布局会导致包含图像的 div 扩展到 100%，但这会导致它与具有固定位置的菜单重叠（将其从 HTML 的“流”中删除，并将其保持在屏幕上的同一位置当您滚动时 - 在图像下方，在这种情况下）。

.affix要解决此问题，您可以使用自己的媒体查询来对抗课程。

在您的主样式表中，您可以添加：

@media (max-width: 767px) {
    .affix{
        position:relative;
        margin-top:30px;
    }
}

这将导致您的菜单在您滚动之前保持其位置 - 在页面顶部并且仍在其流程中，您可能想要它。

另外，我注意到你给了菜单 div id="well sidebar-nav"。我怀疑这是一个错误……您可能想要转到well菜单类。

好吧，我希望这可以帮助您解决问题，或者至少更好地理解它。祝你好运！

于 2013-06-21T21:32:18.710 回答