【发布时间】：2018-04-21 17:58:02
【问题描述】：
我有一个使用 framework-y 和 bootsrap 制作的图片专辑列表，这里是我正在使用的链接：http://html.framework-y.com/containers/masonry/#albums 我有一个专辑列表，点击它会打开该专辑中的图片，并显示在专辑顶部是一个使用 isotope.js 过滤图像的导航栏，我需要将该导航栏设置在左侧并固定，因此当向下滚动现在位于右侧的图像时，它始终可见，只有在 PC 上观看时才能看到当在手机或平板电脑中打开时，我希望保持与现在相同的方式，作为列表位于顶部。
谢谢
更新：
添加的代码，<div class="navbar navbar-inner"> 是具有我需要重新定位到左侧的菜单的那个。
<div class="album-main" data-album-anima="fade-bottom">
<div class="album-list row" style="display: none;">
<div class="album-box col-md-4" data-album-id="album-1">
<div class="img-box scale adv-img adv-img-half-content" data-anima="fade-left" data-trigger="hover">
<a href="#" class="img-box anima-scale-up anima" aid="0.1421574963962673" style="position: relative; transition-duration: 500ms; animation-duration: 500ms; transition-timing-function: ease; transition-delay: 0ms;">
<img alt="" src="/imagenes/galeria/categoria-1.jpg" class="loading" data-was-processed="true">
</a>
<div class="caption">
<h2 class="album-name">Breakfast</h2>
</div>
</div>
</div>
<div class="cont-album-box">
<p class="album-title" style="display: block;">
<span>Breakfast</span>
<a class="button-list btn btn-border btn-xs">
<i class="fa fa-arrow-left"></i> Go Back </a>
</p>
<div class="album-item fade-bottom" style="display: block; transition-duration: 300ms; animation-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms;">
<div class="grid-list" data-trigger="manual">
<div class="navbar navbar-inner">
<div class="navbar-toggle"><i class="fa fa-bars"></i><span>Menu</span><i class="fa fa-angle-down"></i></div>
<div class="collapse navbar-collapse" style="display: none; opacity: 1; height: 0px;">
<ul class="nav navbar-nav over ms-minimal inner grid-filters">
<li class="active current-active"><a data-filter="grid-item">All</a></li><li class=""><a data-filter="subcat-1">Homemade</a></li><li class=""><a data-filter="subcat-2">Kids</a></li><li class=""><a data-filter="subcat-3">Pork</a></li><li class=""><a data-filter="subcat-4">Machacado</a></li><li class=""><a data-filter="subcat-5">Omelettes</a></li><li class=""><a data-filter="subcat-6">Eggs</a></li><li class=""><a data-filter="subcat-7">Others</a></li><li class=""><a data-filter="subcat-8">Saturday and Sunday</a></li> <li class=""><a class="grid-order" data-sort="asc"><i class="fa fa-arrow-down"></i></a></li>
</ul>
</div>
</div>
<div class="grid-box row">
<div class="grid-item col-md-4 subcat-1 row-20">
<div class="advs-box advs-box-multiple boxed-inverse extra-content-cnt" data-anima="scale-rotate" data-trigger="hover" style="visibility: visible; opacity: 1;">
<a class="img-box lightbox i-center" href="/imagenes/galeria/menu-1.jpg" style="opacity: 1;">
<img class="anima loaded" data-src="/imagenes/galeria/menu-1.jpg" alt="" src="/imagenes/galeria/menu-1.jpg" data-was-processed="true" aid="0.7780172567376911" style="position: relative; transition-duration: 500ms; animation-duration: 500ms; transition-timing-function: ease; transition-delay: 0ms; opacity: 1;">
</a>
<div class="circle anima-rotate-20 anima" style="transition-duration: 500ms; animation-duration: 500ms; transition-timing-function: ease; transition-delay: 0ms;" aid="0.9083815830263298">$80<span>3 Pieces</span></div>
<div class="advs-box-content" style="opacity: 1;">
<h3>HOT CAKES</h3>
<span class="extra-content">Includes 1 Orange Juice and Unlimited Coffee</span>
<p>
Hot Cakes con Jamón o Tocino o Cereal o Yogurt o Pan Tostado con Mermelada
</p>
</div>
</div>
</div>
<div class="grid-item col-md-4 subcat-1 row-20">
<div class="advs-box advs-box-multiple boxed-inverse extra-content-cnt" data-anima="scale-rotate" data-trigger="hover" style="visibility: visible; opacity: 1;">
<a class="img-box lightbox i-center" href="/imagenes/galeria/menu-2.jpg" style="opacity: 1;">
<img class="anima loaded" data-src="/imagenes/galeria/menu-2.jpg" alt="" src="/imagenes/galeria/menu-2.jpg" data-was-processed="true" aid="0.2241172766887909" style="position: relative; transition-duration: 500ms; animation-duration: 500ms; transition-timing-function: ease; transition-delay: 0ms; opacity: 1;">
</a>
<div class="circle anima-rotate-20 anima" style="opacity: 1; transition-duration: 500ms; animation-duration: 500ms; transition-timing-function: ease; transition-delay: 0ms;" aid="0.08011167551452192">$53<span> </span></div>
<div class="advs-box-content" style="opacity: 1;">
<h3>MILK SHAKE</h3>
<span class="extra-content"></span>
<p>
Vanilla - Chocolate - Strawberry
</p>
</div>
</div>
</div> <div class="grid-item col-md-4 subcat-1 row-20">
<div class="advs-box advs-box-multiple boxed-inverse extra-content-cnt" data-anima="scale-rotate" data-trigger="hover" style="visibility: visible; opacity: 1;">
<a class="img-box lightbox i-center" href="/imagenes/no-disponible-en.jpg" style="opacity: 1;">
<img class="anima loaded" data-src="/imagenes/no-disponible-en.jpg" alt="" src="/imagenes/no-disponible-en.jpg" data-was-processed="true" aid="0.6266237997032682" style="position: relative; transition-duration: 500ms; animation-duration: 500ms; transition-timing-function: ease; transition-delay: 0ms; opacity: 1;">
</a>
<div class="circle anima-rotate-20 anima" style="opacity: 1; transition-duration: 500ms; animation-duration: 500ms; transition-timing-function: ease; transition-delay: 0ms;" aid="0.46139251079096577">$53<span> </span></div>
<div class="advs-box-content" style="opacity: 1;">
<h3>FRUIT SMOOTHIE</h3>
<span class="extra-content"></span>
<p>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
【问题讨论】：
-
Stackoverflow 不是编码服务。请向我们提供您正在使用的代码，并向我们展示您遇到的问题。然后，我们至少可以开始调试并帮助您解决问题。请看How to create a Minimal, Complete, and Verifiable example
-
另外，为了清楚起见，我恳请您在帖子中添加一些标点符号，因为这很难理解。
-
@ProEvilz 对不起！不是故意粗鲁的。
-
请阅读我上面提供的链接的
minimal部分。