Верхняя панель навигации Изменение размера

Когда я изменяю размер браузера, используя «отзывчивое окно» в элементе проверки, верхняя навигация также становится меньше. Я хочу поддерживать размер. Вот мой код:Верхняя панель навигации Изменение размера

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<style> 
body { 
    background-color: lightblue; 
} 

@media screen and (min-width: 480px) { 
    body { 
     background-color: lightgreen !important; 
    } 
} 
body { padding-top: 70px; } 
</style> 
</head> 
<body> 
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="navbar-header"> 
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 href= "#" class="navbar-brand">Brand Name</a> 
</div> 
<div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav pull-right"> 
     <li class="active "><a href="#">Home</a></li> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 3</a></li> 
     <li><a href="#">Link 4</a></li> 
    </ul> 
</div> 
</div> 

</body> 
</html>

Top Navigation

Here is my problem after resizing the image using inspect element's responsive

источник

2017-02-11 Anonymous

кажется, что только хром масштабирование t, в Firefox это нормально. Так что просто добавьте

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

в начале вашей страницы, тогда это будет видно из следующего.

источник

2017-02-11 06:29:29

Поэтому, пожалуйста, примите ответ –

отзывчивым вопрос из мета в голове ...

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width,intial-scale=1"/> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<style> 
 
body { 
 
    background-color: lightblue; 
 
} 
 

 
@media screen and (min-width: 480px) { 
 
    body { 
 
     background-color: lightgreen !important; 
 
    } 
 
} 
 
body { padding-top: 70px; } 
 
</style> 
 
</head> 
 
<body> 
 
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
<div class="navbar-header"> 
 
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 href= "#" class="navbar-brand">Brand Name</a> 
 
</div> 
 
<div class="collapse navbar-collapse navbar-ex1-collapse"> 
 
    <ul class="nav navbar-nav pull-right"> 
 
     <li class="active "><a href="#">Home</a></li> 
 
     <li><a href="#">Link 1</a></li> 
 
     <li><a href="#">Link 2</a></li> 
 
     <li><a href="#">Link 3</a></li> 
 
     <li><a href="#">Link 4</a></li> 
 
    </ul> 
 
</div> 
 
</div> 
 

 
</body> 
 
</html>

источник

2017-02-11 06:27:46

Верхняя панель навигации Изменение размера

ответ

Смежные вопросы