부트 스트랩 Navbar CSS 문제

저는 잠시 동안 부트 스트랩에서 일해 왔으며 정말 그 모든 기능을 정말 좋아합니다. 그러나 모바일보기에서 탐색 헤더에 문제가 있습니다. 웹 사이트의 데스크톱 버전 중에 표시되는 이미지가 있고 모바일 디스플레이에서 더 작은 아이콘 로고로 변경하려고합니다.부트 스트랩 Navbar CSS 문제

사이트의 아이콘 표시 줄을 올리고 모바일 로그인 화면의 모든 내용을 제대로 볼 수 없습니다. 부트 스트랩의 CSS를 완전히 이해하지는 못했지만 화면이 모바일 모드로 접힐 때 이미지를 변경하는 방법을 누군가에게 알려줄 수는 있습니다.

이

는 웹 사이트가 바탕 화면보기에 모습입니다 : enter image description here

이 원하는 모습 (포토샵에서 만든 것입니다 : enter image description here

이 지금은 모바일 갈 때 모습입니다) : enter image description here

막대가 모바일로 바뀌면 두 이미지를 교환하고 싶습니다.

<div class="navbar navbar-inverse navbar-fixed-top dropShadow" 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" href="#"><img src="images/logoWhite.png" width="400px"></a> 
     </div> 

     <div class="navbar-collapse collapse"> 
      <form class="navbar-form navbar-right" role="form"> 
      <div class="form-group"> 
       <input type="text" placeholder="Email" class="form-control"> 
      </div> 
      <div class="form-group"> 
       <input type="password" placeholder="Password" class="form-control"> 
      </div> 
      <button type="submit" class="btn btn-primary">Sign In</button><span style="color:white;"> or</span> 
      <button type="submit" class="btn btn-success">Sign Up</button> 
      </form> 
     </div><!--/.navbar-collapse --> 
     </div> 
    </div>

출처

2014-05-15 Mike Avery

는이에 대한 미디어 쿼리를 사용할 수 있습니다 -

여기 내 부트 스트랩 코드입니다. 먼저 로고 이미지를 배경으로 사용합니다.

당신이 로고 .logo 사용하는 것이 가정 classmate university

HTML :

<a class="navbar-brand" href="#"><span class="logo"></span></a>

CSS :

@media(max-width:767px){ 

    .logo{ 
     background:url(images/hat.png) no-repeat; 
     width : 400px; 
     display:block; 
    } 
} 

/* this logo will be used for everything outside of the above breakpoint */ 
.logo{background:url(images/logoWhite.png)

출처

2014-05-15 17:30:46

너비를 %로 설정하면 브라우저의 크기가 줄어들 때 '축소'됩니다. 따라서 다양한 이미지 크기를 가질 필요가 없습니다. – zazvorniki

@ zazvorniki 사실 내가 진술 한 것을 선호하지만 그의 경우에는 작은 화면에 이미지가 표시 될 때 변경됩니다. –

변경이 발생하더라도 사용자가 브라우저를 더 작게 만들거나 미래에 텍스트를 추가하기로 결정한 경우에도 여전히 좋은 습관입니다. – zazvorniki

당신은 .visible-XS를 클래스를 사용하여 인라인이 두 이미지를 넣어 수 있습니다 작은 로고, 모바일 모드 및 기타 (대학 이름) 이미지 태그의 .hidden-xs 클래스.

.visible-xs - 모바일 모드에서 ur 이미지를 표시하고 나머지 모드에서는 숨김으로, .hidden-xs는 모바일 모드에서 이미지를 숨기고 나머지 모드에서는 표시합니다.

출처

2014-05-15 18:06:30

부트 스트랩 Navbar CSS 문제

답변

관련 문제