2013-06-19 55 views
0

即時通訊使用bootstrap和即時通訊嘗試使用bootstrap,同位素和表達式引擎做出響應式網頁。我使自己的網絡適應了默認的引導程序特性。網頁響應不同的屏幕尺寸,但是當頁面大小在480像素和768像素之間時,頁面沒有反應良好,滾動圖片在菜單中移動。我不希望那樣,我只是希望一切都隨着滾動而移動。bootstrap在不同屏幕尺寸下的響應式設計小錯誤

喜歡:

滾動前:

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

滾動後:

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

第二幅圖片的菜單背後所有的圖片,我想爲所有的頁面應用滾動,而不僅僅是圖片。

由對方我想使用jQuery Mobile的480像素下,我不知道我是否需要創建另一個頁面,或如何handdle,根據480像素

我的一些代碼:

<!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 這是分辯的鏈接現在,IM的測試,但我不能找到爲什麼這個bug

+0

您可以通過鏈接發送,以便我們可以看到該東西的工作? –

+0

www.mntdesign.co/?/main即時鏈接 –

回答

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移至菜單的課程。

嗯,我希望這可以幫助你解決問題,或者至少能夠更好地理解它。祝你好運!

+0

感謝您的幫助!我添加了@media(max-width:767px){.affix}但沒有任何變化,仍然存在相同的問題,另一件事是當我在全尺寸上使用滾動時,側欄更改大小,並且我看到它更小向下滾動,原始大小向上滾動。感謝您花了幾分鐘的時間幫助我! –

+0

對不起,我不確定你看到完全更新的答案。我通過鍵入我的代碼意外提交了一半...現在嘗試完整的代碼片段? EHEH。 – Serlite

+0

哦,你看到菜單收縮的原因也是因爲這個位置:我相信。最初,它花了它的父div的寬度......但是在滾動並從佈局中按位置移除:fixed時,縮小到其子元素的最小可能寬度 - img元素。爲了解決這個問題,你可以給菜單div一個明確的寬度。 (但可能有其他方法。) – Serlite