부트 스트랩 펼쳐진 축소 가능 메뉴가 xs 격자로 덮여 있습니다.

모바일에서이 사이트를 보거나 xs 격자가 적용될 때까지 브라우저 크기를 줄이면 펼쳐진 축소 가능 메뉴 링크 ("주거용"아래)가 슬라이드 쇼 div로 덮여 있습니다. 이 문제를 쉽게 해결할 수 있습니까? 내 삶을 위해 그것을 깰 수 없습니다.부트 스트랩 펼쳐진 축소 가능 메뉴가 xs 격자로 덮여 있습니다.

사이트 예 : http://parkerrichard.com/studiogreen/html/process.html

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset=“UTF-8”> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <title>Studio Green</title> 

    <!-- Bootstrap core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Bootstrap custom CSS --> 
    <link href="css/custom.css" rel="stylesheet"> 

    <!-- Typekit custom fonts --> 
    <script src="//use.typekit.net/bcn3ife.js"></script> 
    <script>try{Typekit.load();}catch(e){}</script> 

    <link href="css/flexslider.css" rel="stylesheet"> 

    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <![endif]--> 
    <script src="js/respond.min.js"></script> 

    <!-- custom icons --> 
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="fonts/flexslider-icon.eot"> 

</head> 

<body> 
    <!-- row 1: static navbar --> 
    <nav class="navbar navbar-default navbar-top" role="navigation"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     <a class="navbar-brand logo" href="index.html"><img class="logo" src="img/logo.png"></a> 
     </div><!-- navbar toggle --> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="process.html">PROCESS</a></li> 
      <li><a href="office.html">OFFICE</a></li> 
      <li><a href="contact.html">CONTACT</a></li> 
      </ul> 
     </div><!--/nav-collapse --> 
     </div><!-- container --> 
    </nav><!-- navbar --> 

    <!-- row 2: body --> 
    <div class="container"> 
     <div class="row centered"> 

      <!-- sidebar --> 
       <aside class="navbar-collapse collapse panel-group col-lg-3 col-med-4 col-sm-4" id="accordion" role="tablist" aria-multiselectable="true"> 
       <div class="panel panel-default"> 
       <div class="panel-heading" role="tab" id="headingOne"> 
        <h4 class="panel-title"> 
        <li class="active"> 
         <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
          RESIDENTIAL 
        </li> 
        </a> 
        </h4> 
       </div> 
       <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
        <div class="panel-body"> 
        <ul> 
         <li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li> 
         <li class="active"><a href="project-01.html">PROJECT <span class="spaced">1</span></a></li> 
         <li><a href="project-01.html">PROJECT <span class="spaced">2</span></a></li> 
         <li><a href="project-01.html">PROJECT <span class="spaced">3</span></a></li> 
         <li><a href="project-01.html">PROJECT <span class="spaced">4</span></a></li> 
         <li><a href="project-01.html">PROJECT <span class="spaced">5</span></a></li> 
         <li><a href="project-01.html">PROJECT <span class="spaced">6</span></a></li> 
         <li><a href="project-01.html">PROJECT <span class="spaced">7</span></a></li> 
         <li><a href="project-01.html">PROJECT <span class="spaced">8</span></a></li> 
         <li><a href="project-01.html">PROJECT <span class="spaced">9</span></a></li> 
         <li><a href="project-01.html">PROJECT <span class="spaced">10</span></a></li> 
        </ul> 
        </div> 
       </div> 
       </div> 
       <div class="panel panel-default"> 
       <div class="panel-heading" role="tab" id="headingThree"> 
        <h4 class="panel-title"> 
        <a href="schools.html"> 
         SCHOOLS 
        </a> 
        </h4> 
       </div> 
       </div> 
       <div class="panel panel-default"> 
       <div class="panel-heading" role="tab" id="headingThree"> 
        <h4 class="panel-title"> 
        <a href="parks.html"> 
         PARKS 
        </a> 
        </h4> 
       </div> 
       </div> 
       <div class="panel panel-default"> 
       <div class="panel-heading" role="tab" id="headingThree"> 
        <h4 class="panel-title"> 
        <a href="hospitality.html"> 
         HOSPITALITY 
        </a> 
        </h4> 
       </div> 
       </div>    <div class="panel panel-default"> 
       <div class="panel-heading" role="tab" id="headingFive"> 
        <h4 class="panel-title"> 
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> 
         ELEMENTS 
        </a> 
        </h4> 
       </div> 
       <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive"> 
        <div class="panel-body"> 
        <ul> 
         <li class="drop"><span class="glyphicon glyphicon-chevron-down nav-caret"></span></li> 
         <li><a href="plants.html">ENTRY</a></li> 
         <li><a href="plants.html">FENCES</a></li> 
         <li><a href="plants.html">FIRE</a></li> 
         <li><a href="plants.html">LIGHTING</span></a></li> 
         <li><a href="plants.html">PAVING</a></li> 
         <li class="active"><a href="plants.html">PLANTS</a></li> 
         <li><a href="plants.html">POOLS</a></li> 
         <li><a href="plants.html">SEATING</a></li> 
         <li><a href="plants.html">SCULPTURE</a></li> 
         <li><a href="plants.html">STAIRS</a></li> 
         <li><a href="plants.html">SUSTAINABILITY</a></li> 
         <li><a href="plants.html">WATER</a></li> 
        </ul> 
        </div> 
       </div> 
       </div> 
      </aside> 

      <!-- slideshow gallery -->   
      <div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-8 col-md-7 col-sm-7 col-xs-12"> 
       <div class="flexslider"> 
        <ul class="slides"> 
        <li> 
         <img src="img/project-1_01.jpg" /> 
        </li> 
        <li> 
         <img src="img/project-1_02.jpg" /> 
         <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
          Location: Los Altos Hills, CA<br /> 
          Architect: SDG Architects<br /> 
          Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, restraint, minimalization, and restoration landscape.</p> 
        </li> 
        <li> 
         <img src="img/project-1_03.jpg" /> 
         <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
          Location: Los Altos Hills, CA<br /> 
          Architect: SDG Architects<br /> 
          Exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods.</p> 
        </li> 
        <li> 
         <img src="img/project-1_04.jpg" /> 
        </li> 
        <li> 
         <img src="img/project-1_05.jpg" /> 
         <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
          Location: Los Altos Hills, CA<br /> 
          Architect: SDG Architects<br /> 
          Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass, along.</p> 
        </li> 
        <li> 
         <img src="img/project-1_06.jpg" /> 
         <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
          Location: Los Altos Hills, CA<br /> 
          Architect: SDG Architects<br /> 
          Large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization, and restoration landscape allows this home to exude quiet, California Fescue, Berkeley Sedge, Coyote Needle Grass.</p> 
        </li> 
        <li> 
         <img src="img/project-1_07.jpg" /> 
         <p class="flex-caption right"><span class="strong">PROJECT <span class="sm-spaced">1</span></span><br /> 
          Location: Los Altos Hills, CA<br /> 
          Architect: SDG Architects<br /> 
          Fescue, Berkeley Sedge, Coyote Needle Grass, along with large specimen and Redwoods comprise the restorative Restraint, minimalization, and restoration landscape allows this home to exude quiet, Restraint, minimalization.</p> 
        </li> 
        <li> 
         <img src="img/project-1_08.jpg" /> 
        </li> 
        </ul> 
       </div> 
      </div> 
      <!-- address --> 
      <address>232 SIR FRANCIS DRAKE BLVD</br> 
      SAN ANSELMO, CA 94960</br> 
      415 721 0905</address> 
     </div><!--/row --> 
    </div><!--/container --> 


    <!-- javaspcript --> 
    <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <script src="js/jquery.flexslider.js"></script> 
    <script> 
     $(window).load(function() { 
      $('.flexslider').flexslider({ 
      animation: "fade" 
      }); 
     }); 
    </script> 

</body> 
</html>

CSS

/* this is a custom css stylesheet */ 


/* ========================================================================== 
    Base Styles, Bootstrap Modifications & Fonts Import 
    ========================================================================== */ 

/* 
* A better looking default horizontal rule 
*/ 

hr { 
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 1px solid #ccc; 
    margin: 1em 0; 
    padding: 0; 
} 


.container { 
    width: 100%; 
} 


.centered { 
    text-align: center; 
} 

.img-centered { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 

.mt-lg { 
    margin-top: 100px; 
} 

.mt { 
    margin-top: 80px; 
} 

.mb { 
    margin-bottom: 80px; 
} 

.drop { 
    margin-bottom: -15px; 
} 

.spaced { 
    margin-left: 37px; 
} 

.sm-spaced { 
    margin-left: 5px; 
} 


/* ========================================================================== 
    General styles 
    ========================================================================== */ 

html, body { 
    max-width: 100%; 
    overflow-x: hidden; 
} 

body { 
    font-family: "proxima-nova", sans-serif; 
    font-weight: 500; 
    font-size: 12px; 
    letter-spacing: 1px; 
    color: #555; 

    -webkit-font-smoothing: antialiased; 
    -webkit-overflow-scrolling: touch; 
} 

a { 
    color: #555; 
    outline: 0; 
} 

.strong { 
    font-weight: bold; 
    font-size: 13px; 
} 

small { 
    color: #555; 
} 

aside { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

address { 
    text-align: left; 
    line-height: 23px; 
    letter-spacing: 2px; 
    float: right; 
    padding: 90px 0px 30px 15px; 
    margin-right: 70px; 
} 

.email { 
    color: #6CAA3D; 
    font-weight: 400; 
} 

.info-box { 
    float: right; 
    text-align: left; 
    line-height: 17px; 
    font-weight: 400; 
    letter-spacing: 2px; 
    width: 315px; 
    height: 450px; 
    padding: 60px 20px 0 15px; 
} 

.info-box p { 
    padding-top: 12px; 
} 

.info-box h5 { 
    padding-bottom: 8px; 
    font-size: 17px; 
    font-weight: 700; 
} 

.contact { 
    height: auto!important; 
    margin-right: 5px; 
    width: 315px; 
} 

.team-box img { 
    border: 1px solid black; 
    margin-bottom: 30px; 
} 

/* ========================================================================== 
    Navigation styles 
    ========================================================================== */ 

/* 
* Top nav section 
*/ 

.navbar-header { 
    padding-bottom: 50px; 
} 

.navbar-brand { 
    margin-left: 0px!important; 
} 

.navbar .nav { 
    text-align: left; 
    margin-top: 45px; 
} 

.navbar .nav > li { 
    float: none; 
    display: inline-block; 
    font-size: 14px; 
    letter-spacing: 2px; 
    font-weight: 400; 
} 

.navbar-default { 
    background-color: white; 
    border-bottom: 0px; 
} 

.navbar-default .navbar-nav > li > a { 
    color: #555; 
} 

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .active > a, a:hover, a:active, a:focus { 
    color: #6CAA3D; 
    background-color: transparent; 
    text-decoration: none; 
    outline: 0; 
} 

.navbar-default .navbar-nav > li { 
    padding: 0px 15px 15px 15px; 
} 

.navbar-collapse { 
    margin-top: -65px; 
    border-top: 0px; 
} 

.navbar-default .navbar-collapse { 
    padding-top: 10px; 
    z-index: 99; 
} 

.logo { 
    margin-top: 10px; 
    height: 100px; 
    width: 200px; 
} 

.navbar-right { 
    padding: 15px 20px 0 0; 
} 

/* 
* Left aside nav 
*/ 

.panel { 
    border: 0px; 
    -webkit-box-shadow: 0 0px 0px rgba(0,0,0,.0); 
    box-shadow: 0 0px 0px rgba(0,0,0,.0); 
    margin: 45px 0 0 100px; 
} 

.panel-title { 
    font-size: 14px; 
    letter-spacing: 2px; 
    font-weight: 400; 
    color: #555; 
    padding-top: 7px; 
    padding-bottom: 7px; 
    list-style: none; 
} 

.panel-title a { 
    text-decoration: none; 
} 

.panel-default > .panel-heading { 
    background-color: transparent; 
    border-color: transparent; 
} 

.panel-body { 
    margin-left: -25px; 
    margin-top: -22px; 
    padding-top: 0px; 
    padding-bottom: 0px; 
    padding-left: 0px; 
} 

.panel-body ul { 
    list-style-type: none; 
} 

.panel-body ul li { 
    padding-top: 10px; 
    padding-bottom: 10px; 
    letter-spacing: 1px; 
} 

.panel-group { 
    text-align: left; 
} 

.panel-group .panel-heading + .panel-collapse > .panel-body { 
    border-top:0px; 
} 

.nav-caret { 
    padding-left: 10px; 
    font-size: 8px; 
} 

/* 
* flexslider format 
*/ 

.flexslider{ 
    background:none!important; 
    border:none!important; 
    box-shadow:none!important; 
    margin:0px -15px 0px 0px!important; 
    overflow: hidden; 
    z-index: 1; 
} 

.flex-direction-nav a { 
    color: #999!important; 
} 

.flex-next { 
    padding-right: 40px!important; 
} 

.flex-control-nav { 
    text-align: right!important; 
    padding-right: 70px!important; 
} 

.flex-control-paging li a { 
    color: transparent!important; 
} 

.nodot .flex-control-paging li a { 
    display: none!important; 
} 

.flex-control-paging li a.flex-active { 
    background: #6CAA3D!important; 
} 

.right { 
    padding-top: 100%!important; 
    bottom: 0; 
    right: 0; 
    margin-bottom: 0px; 
} 

.top { 
    top: 0; 
    margin-top: 10px; 
} 

.btm { 
    bottom: 0; 
    margin-bottom: 10px; 
} 

.l { 
    left: 0; 
} 

.r { 
    right: 0; 
} 

.w { 
    width: 100%!important; 
    left: 10px; 
    padding-right: 30px!important; 
} 

.flex-caption { 
    position: absolute; 
    text-align: left; 
    background:rgba(255, 255, 255, 0.7); 
    z-index: 1; 
    padding: 20px; 
    font-size: 11px; 
    width: 300px; 
} 

.flex-caption p { 
    padding-top: 12px; 
} 

.carousel .slides > li { 
    padding-right: 10px; 
}

출처

2014-12-24 Parker Richard

기본적으로 '.collapse'에는 display : none이 있습니다. CSS에서'.navbar-collapse.collapse {display : block! important;}'를 주면 표시됩니다. – anpsmn

사실, 문제는 확장 된 메뉴의 하위 링크 (xs 격자보기)가 클릭 할 수 없으며 슬라이드 쇼 div로 덮여 있다는 점입니다. 나는 이것에 대한 해결 방법을 찾고있다. 이것이 불분명하면 죄송합니다. –

문제로 인해이 문제가 해결됩니다 <div class="flexslider">의 부모에 pull-left 추가 수레

이었다

<div class="col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-lg-8 col-md-7 col-sm-7 pull-left"> <!-- add pull-left 
    <div class="flexslider">

출처

2014-12-24 08:00:29

너무 간단! 나에게 두통을 저장해 주셔서 감사합니다 –

환영 @ParkerRichard :) –

나는 2 가지 문제가 있다고 생각합니다.
첫째 : 슬라이드 쇼 DIV에 포함 왼쪽 메뉴
둘째, 사이드 메뉴 상단 메뉴에 갈 때 "태그를 제외하고 그냥"COL-MD-4 "를 사용하지 왜 첫 번째 문제에 대한 모바일
에서보기 col-md-8 "을 찾으셨습니까? 내가 그 일

의 확인 및 초 내가 생각하는 더 나은 당신이 문제라고 생각한다면 대신 "네비게이션 바 붕괴"물론
의 "메뉴 바 기본"을 사용합니다.

출처

2014-12-24 08:16:54 aref

부트 스트랩 펼쳐진 축소 가능 메뉴가 xs 격자로 덮여 있습니다.

답변

관련 문제