2013-06-19 4 views
0

부트 스 트랩과 새로운 부트 스트랩, 동위 원소 및 표현 엔진을 사용하여 반응 형 웹을 만들려고합니다. 나는 부울의 기본 부트 스트랩 특성을 사용하여 웹을 만들었습니다. 웹 페이지는 다른 화면 크기에 반응하지만, 페이지 크기가 480px와 768px 사이 일 때 스크롤이 그림과 함께 잘 움직이지 않습니다. 그리고 나는 그것을 원하지 않습니다, 나는 그 모든 것이 두루마리와 함께 움직이기를 원합니다.다른 화면 크기에서 부트 스트랩 응답 성 디자인 작은 버그

좋아 : 스크롤하기 전에

:

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

스크롤 후 : 두 번째 사진에서

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

메뉴 뒤에입니다 모든 사진, 나는 사진뿐만 아니라 모든 페이지에 스크롤을 적용하고 싶습니다. 내가 480 픽셀에서 JQuery와 모바일을 사용하고자하는 다른 옆에

, 나는 다른 페이지를 만들 필요가, 또는 얼마나 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 이 지금 rigth 링크, 메신저 테스트이지만,이 버그

+0

우리는 링크가 작동하도록 볼 수 있도록 링크를 보낼 수 있습니까? –

+0

www.mntdesign.co/?/main thats 지금 바로 링크 –

답변

1

글쎄, 내가 문제를 발견했다고 생각하는 이유는 찾을 수 없습니다. 나는 아직도 내가 도울 수 있기를 바란다!

스크롤 할 때 메뉴에 동적으로 추가되는 .affix 클래스 (특히 position:fixed)가 문제입니다. 큰 화면에서는 잘 보일 것입니다. 그러나 화면을 충분히 좁게 (767px 이하) 만들면 Twitter 부트 스트랩의 모바일 레이아웃이 미디어 쿼리를 통해 트리거됩니다. 앞서 언급 한 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

죄송합니다. 완전히 업데이트 된 답변을 본 것으로 확신하지 않습니다. 실수로 내 코드를 입력하는 도중 제출했습니다 ... 이제 전체 스 니펫을 시도해보십시오. 에히. – Serlite

+0

아, 메뉴 축소를 보는 이유는 위치 때문이기도합니다 : 고정되어 있습니다. 원래는 부모 div의 너비가 걸렸지 만 스크롤 한 다음 위치별로 레이아웃에서 제거하면 고정 된 상태에서 자식의 가능한 가장 작은 너비 인 img 요소로 축소됩니다. 이를 방지하기 위해 메뉴 div에 명시적인 너비를 지정할 수 있습니다. (하지만 다른 방법이있을 수 있습니다.) – Serlite

관련 문제