부트 스트랩 3 - 메뉴 바

나는 내 코드 2 문제가 부트 스트랩 (3)을 사용하여 웹 사이트 쓰고 있어요

을 중심으로 문제 : 로고는 브라우저의 크기를 조정 한 후 부트 스트랩 3 - 메뉴 바

을 중심으로 나는 메뉴 모음을 갖고 싶어

을 창 햄버거 메뉴가 확장되지 않습니다.

나는 천천히 포기하고 있습니다. 이 문제에 대한 해결책이 있습니까? 다음은 내 코드입니다 - index.html을하고 CSS 파일 : 없음 들어

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Perm-Records</title> 

    <!-- Bootstrap --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <!-- Content height adjust --> 
    <!-- <script src="content-height-adjust/heightAdjust.js"></script> --> 

    <!--Font Awesome --> 
    <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css"> 

    <link href="bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"> 
    <link href="bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    <link rel="stylesheet" type="text/css" href="css/Custom.css"> 
    <link rel="stylesheet" href="css/flat-ui.css"> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <link rel="stylesheet" href="css/sticky-footer.css"> 



    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 

<body> 
    <div class="Custom">   
     <nav class="navbar navbar-default" role="navigation"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 

      <a class="navbar-brand" href="index.html"> 
       <img class="img-responsive logo" src="images/perm-logo.jpg" alt="Perm-Records"> 
      </a> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
       <ul class="nav navbar-nav"> 
        <li><a href="index.html">HOME</a></li> 
        <li><a href="#">EVENTS</a></li> 
        <li><a href="#">MUSIC</a></li> 
        <li><a href="#">GALLERY</a></li> 
        <li><a href="#">ABOUT</a></li> 
       </ul> 
      </div> 
     </nav> <!-- End navigation menu bar -->  
    </div>  

    <div class="container-fluid"> <!--Page content --> 
     <div class="row"> 
       <div class="col-md-3"> 
       </div>   
        <div class="col-md-6"> 
         <table border="0" align="center" cellpadding="0" cellspacing="0">       
          <tr><td align="center"><img src="images/Perm.png"></td></tr>         
         </table> 
          <p class="text-center"> Haubentaucher, Revaler Str 99, 10245 Berlin. </p> 
        </div> 
       <div class="col-md-3">  
       </div> 
     </div> 
    </div> <!-- End of page content --> 

     <div class="footer">   
      <div class="navbar-text pull-left" id="footer-text"> 
       <p> &#169 2016 perm-records.com </p> 
      </div> 
      <div class="navbar-text pull-right" id="footer-social"> 
       <!-- Font Awesome social buttons --> 
       <a href="https://soundcloud.com/permrecords" target="_blank" title="Soundcloud"><i class="fa fa-soundcloud fa-2x"></i></a> 
       <a href="https://www.facebook.com/permrecords/?fref=ts" target="_blank" title="Facebook"><i class="fa fa-facebook fa-2x"></i></a> 
       <a href="https://www.instagram.com/perm_records/" target="_blank" title="Instagram"><i class="fa fa-instagram fa-2x"></i></a> 
      </div> 
     </div> 

</body> 
</html>

.Custom .navbar { 
    background-color: transparent; 
    background: transparent; 
    border-color: transparent; 
    height: 180px; 
} 

.Custom .navbar .navbar-brand > a { 
position: absolute; 
    width: 100%; 
    left: 0; 
    top: 0; 
    text-align: center; 
    margin: auto; 
    padding:0; 
} 

.Custom .text { 
    text-align: center; 
} 

body, html{ 
    background: url('../images/Background2.png') no-repeat center fixed; 
    padding-top: 0px; 
    height: 100vh; 
    margin: 0; 
}

출처

2016-10-28 Waldemar W

1. 요구 사항입니다 2. 문제가 있습니다 – JohnH

로고를 중심으로 수평을 의미합니까? 원하는 모양의 스크린 샷을 공유 할 수 있습니까? –

예, 여기 스크린 샷의 링크입니다 : https://s4.postimg.org/luirw9axp/Bez_tytu_u.png –

: 1 = (내가 중심 로고가있는 메뉴 모음을 갖고 싶어)

우선 <div class="Custom">...</div>을 <div class="container">...</div>에 넣어 부트 스트랩 미디어 쿼리에 의해 제어되는 본문 상자에 맞 춥니 다. 두 번째로 <div class="container-fluid">을 <nav> 태그 뒤에 추가하고 앞에 </div>을 추가하여 끝내십시오. 세 번째 스타일을 중심에 정렬하고 여백 등을 조정하려면 다음 클래스를 추가하십시오. 아니 들어

.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
    vertical-align: top; 
} 
.navbar .navbar-collapse { 
    text-align: center; 
} 

.Custom .navbar-toggle { 
    margin: 10px 0px 0 0; 
} 

@media (min-width: 768px) { 
    .Custom .nav >li >a { 
    padding-top: 30px; 
    padding-bottom: 30px; 
    } 
}

: 당신은 부트 스트랩 라이브러리가 필요하며 그 앞에 추가 될 필요가있다 jQuery 라이브러리를 추가하지 않는

2 = (브라우저 창 햄버거 메뉴의 크기를 조정 한 후 확대되지 않음). 그래서 다음을 넣어 또는 jquery.min.js (버전 2.2.4) 파일을 다운로드하여 바로 코드를 사용하여 <title>Perm-Records</title>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

샘플 코드 후 그것의 스크립트 태그를 넣어 :이 도움이 http://codepen.io/Nasir_T/pen/rMgRPM

희망을.

출처

2016-10-28 20:17:02

도움 주셔서 대단히 감사합니다. –

부트 스트랩 3 - 메뉴 바

답변

관련 문제