如何将导航栏放在固定位置的左侧

时间:2018-04-20 01:22:22

标签: css twitter-bootstrap-3

我有一个用framework-y和bootsrap制作的图像专辑列表,这里是我正在使用的链接:http://html.framework-y.com/containers/masonry/#albums我有一个专辑列表,当点击它时会打开该专辑中的图像,并显示在相册的顶部有一个使用isotope.js过滤图像的导航栏,我需要将导航栏设置为左侧并固定,因此当向下滚动现在位于右侧的图像时,它始终可见,这仅在观看时才会显示在移动设备或平板电脑上打开电脑的时候我想保持它与现在一样,在列表顶部。

由于

更新:

已添加代码,<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>

1 个答案:

答案 0 :(得分:0)

您是否尝试过添加.pull-left

<div class="navbar navbar-inner pull-left">

要修复它,您应该将其用作导航栏标记:

<div class="navbar navbar-default navbar-fixed-top">