導航欄上的響應式品牌形象

我在導航欄上的圖像中遇到了問題，當我嘗試將其最小化時，因爲較小的圖像被摺疊按鈕壓下。是否有可能在不使用媒體查詢的情況下使圖片變得快速響應？因爲我認爲這是一個不好的做法，作爲一個初學者使用媒體查詢只是爲了使圖像變得快速響應，我認爲還有其他方法可以在不使用媒體查詢的情況下做到這一點:) Im新的HTML，CSS，也引導。提前致謝。導航欄上的響應式品牌形象

下面是未最小化時的圖像。

這是最小化時的圖片，因爲您可以看到圖片被摺疊按鈕按下。

這裏是我的導航欄的html代碼。

<div class="collapse navbar-collapse" id="nav-collapse"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">Students</a></li> 
     <li><a href="#">Faculty</a></li> 
     <li><a href="#">Contact us</a></li> 

    </ul> 

    <ul class="nav navbar-nav navbar-right"> 
       <li><a data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
       <!-- Modal --> 
        <div id="myModal" class="modal fade" role="dialog"> 
         <div class="modal-dialog"> 
       <!-- Modal content--> 
         <div class="modal-content"> 
          <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 
          </div> 
          <div class="modal-body"> 
           <p>Some text in the modal.</p> 
          </div> 
          <div class="modal-footer"> 
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
          </div> 
         </div> 
         </div> 
        </div> 
     </ul> 
     </div> 
    </div> 
    </nav>

這裏是我的CSS

.navbar-default .navbar-nav > li > a { 
font-weight: 590; 
color: #949494; 
display: block; 
padding: 5px 35px 2px 45px; 
border-bottom: 3px solid transparent; 
line-height: 97px; 
text-decoration: none; 
transition: border-bottom-color 0.5s ease-in-out; 
-webkit-transition: border-bottom-color 0.5s ease-in-out; 
} 
.navbar-default{ 
background-color:#fff; 
margin: 0; 

} 
.nav>li>a { 
position: relative; 
} 
.navbar-default .navbar-right > li > a { 
padding-left: 70px; 
padding-right: 1px; 
} 
.navbar-default .navbar-toggle .icon-bar { 
background-color: #000000; 
margin:0 0 4px; 
width: 25px; 
height: 5px; 

} 
.nav.navbar-nav > li{ 
display: :inline-block; 
} 
.nav.navbar-nav{ 
list-style-type:none; 
} 
.nav.navbar-nav > li > a:hover{ 
    color:#a92419; 
    border-bottom-color: #a92419; 
    } 

     .navbar-default .navbar-toggle .icon-bar { 
     background-color:#a92419 ; 
     margin:0 0 4px; 
     width: 25px; 
     height: 5px; 

     } 
     .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{ 
     background: none; 
     } 
     button.navbar-toggle{ 
     background:none; 
     border:none; 
     color:#000; 
     }

來源

2016-04-30 nethken

圖像的代碼在哪裏？ – SEUH

圖像先生沒有CSS。我不知道該放什麼。 – nethken

你可以用你的圖像中的錨標記，並給它一個類的導航欄，品牌，並給予形象一個身份證。

<a class="navbar-brand" href="#"><img id="logo" src="logo.png"></a>

的導航欄，品牌類將有助於給它的響應，你可以使用id #logo來控制圖像的大小和位置。查看此鏈接以引導關於使用navbar品牌類進行圖片的討論。 http://getbootstrap.com/components/#navbar-brand-image

來源

2016-04-30 17:43:05 codeKracken

這是行不通的：3 – nethken

我的形象是如此之大，你可以看到 – nethken

你需要指定你想要的圖像的大小。使用#logo {width：50px; height：50px;} 50px;只是一個例子，你需要使用最適合你的高度和寬度。如果您使用px，則需要添加適當的媒體查詢以使其響應。或者，您可以聲明百分比而不是px。如果您使用百分比，則不需要媒體查詢。 – codeKracken

導航欄上的響應式品牌形象

回答

相關問題