2014-02-20 6 views
0

웹 페이지가 있는데 인쇄하려고합니다. 나는 부트 스트랩 navbar를 사용하고있다. 문제는 부트 스트랩 탐색 표시 줄을 사용할 때 인쇄 미리보기가 제대로 작동하지 않는다는 것입니다. 나는 실제 내용 대신에 코드 int 라인을 본다. 내가 그렇게 페이지를 것 어떻게해야합니까 무엇부트 스트랩으로 뒤섞여 인쇄됩니다.

<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link href="design.css" rel="stylesheet"> 
<link rel="stylesheet" type="text/css" media="print" href="design.css"> 
<body> 

<div class="navbar navbar-inverse navbar-static-top" > 
     <div class="container"> 

      <a href="http://localhost/sapir/registration.php" class="navbar-brand"><img src="http://sphotos-h.ak.fbcdn.net/hphotos-ak-prn1/41032_147610068590926_4173889_n.jpg" id="logo"></a> 

      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
       <span class="icon-bar"></span> <span class="icon-bar"></span> <span 
        class="icon-bar"></span> 
      </button> 

      <div class="collapse navbar-collapse navHeaderCollapse"> 

       <ul class="nav navbar-nav navbar-right"> 


        <li><a href="javascript&#058;print(document)"><img src="https://cdn1.iconfinder.com/data/icons/nuvola2/128x128/devices/print_printer.png" id="logo" ></a></li> 
        <li><a href="Register.html">Register</a></li> 
        <li><a href="customer.html">Clients</a></li> 
        <li><a href="Administrator.html">Administrator</a></li> 
        <li><a href="account.html">Accounts</a></li> 
        <li><a href="Illustration.html">Illustration</a></li> 
        <li class="active"><a href="http://localhost/sapir/php-calendar-2.0/index.php">שיבוץ</a></li> 
        <li class="dropdown"><a href="#" class="dropdown-toggle"></li> 

       </ul> 

      </div> 

     </div> 
    </div> 
</body> 

: 내 페이지 (관련 부분) (아래 코드에서 볼 수 있듯이) 내가 bootstrap.min.css에 refferance를 추가 할 때 문제에만 발생 navbar없이 올바르게 인쇄 하시겠습니까? http://postimg.org/image/mk0vwde8b/6e80e14d/

+0

인쇄 할 때 navbar를 표시해야합니까? 그렇지 않다면 print css에'display : none'을 입력하십시오. 그 외, 당신은 html 오류가있는 것 같습니다. 다음 코드를 통해 코드를 실행하십시오. http://validator.w3.org/ –

+0

이 HTML은 PHP 페이지로만 가져오고 있습니다. Navbar가 아닌 PHP 컨텐츠를 인쇄하고 싶습니다. 아래 해결 방안이 나에게 적합하지 않습니다. 다른 아이디어? – user2674835

답변

1

당신은 페이지가 인쇄 될 때 숨기는 클래스를 생성하는 CSS 미디어 쿼리를 사용할 수 있습니다

문제의 이미지입니다.

@media print {  
    .print-hide .print-hide * { 
     display: none !important; 
    } 
} 

이제 페이지를 인쇄 할 때 숨기려 네비게이션 바에과 다른 아무것도 클래스 .print-hide를 추가!

+0

나는이 해결책을 보았다. 그것은 나를 위해 일하지 않는다. – user2674835

+0

인쇄 할 때 탐색 모음이 숨겨져 있지 않습니까? – binaryatrocity

+0

인쇄 할 수있는 콘텐츠가 페이지에 표시되지 않는다는 것은 알 수 없습니다. 코드 라인을 인쇄하려고하는 것 같고 URL의 – user2674835

관련 문제