0
我有一个导航栏，除了当它折叠时看起来相当不错，选项之间的间距太大。我喜欢导航栏的高度，并希望保持相同，但如果我改变了填充，它使得在普通查看模式下的高度太小，磨碎选项之间的间距会更好，但整体外观不是我想要的。此外，使用移动格式观看图片时无法正确调整尺寸？但我认为这是由于间隔再次。任何帮助表示赞赏。导航栏间距正在缩小大小看起来很愚蠢
a[href^=tel] {
color: inherit;
text-decoration: none;
}
.navbar-default {
display: flex;
align-items: center;
padding-left: 10px;
padding-right: 10px;
border: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: #00a3fe;
font-size: 14pt;
font-weight: 400;
}
a:hover {
text-decoration: none;
}
.nav.navbar-nav.navbar-right li a {
color: #ffffff;
}
.nav.navbar-nav.navbar-nav li a {
color: #ffffff;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
background-color: #49bdfe;
color: #FFFFFF;
}
.navbar-toggle,
.icon-bar {
border: 1px solid white;
background-color: white;
}
.navbar-toggle {
color: : white;
border: none;
background: transparent !important;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle {
border: none;
background: transparent !important;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.2s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
padding: 10px 16px;
transition: all 0.4s ease 0s;
}
.navbar-brand {
font: 30px cursive;
display: flex;
align-items: center;
}
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 100%;
padding: 15px;
width: auto;
}
/* EXAMPLE 3
line height is 20px by default so add 30px top and bottom to equal the new .navbar-brand 80px height */
.example3 .navbar-brand {
height: 80px;
}
.example3 .nav>li>a {
padding-top: 30px;
padding-bottom: 30px;
}
.example3 .navbar-toggle {
padding: 10px;
margin: 25px 15px 25px 0;
}
.navspacing {
padding-left: 30px;
padding-right: 30px;
}
.example3 {
padding-left: 30px;
padding-right: 30px;
}<!-- NAVBAR -->
<nav class='navbar navbar-default example3'>
<div class='container'>
<div class='navbar-header'>
<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#example-navbar-collapse'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar top-bar'></span>
<span class='icon-bar middle-bar'></span>
<span class='icon-bar bottom-bar'></span></button>
<span class='navbar-brand'><img src="images/f2p7.png" alt="faces2places" class="img-responsive" /></span></div>
<div class='collapse navbar-collapse' id='example-navbar-collapse'>
<ul class='nav navbar-nav'>
<li><a href='about.php' class='btn btn-primary btn-lg sharp' role='button'>About</a></li>
<li><a href='get_bids.php' class='btn btn-primary btn-lg sharp' role='button'>Get bids</a></li>
<li><a href='register.php' class='btn btn-primary btn-lg sharp' role='button'>Register company</a></li>
<li><a href='contact.php' class='btn btn-primary btn-lg sharp' role='button'>Contact</a></li>
</ul>
<ul class='nav navbar-nav navbar-right'>
<li><a href='login.php' class='btn btn-primary btn-lg sharp' role='button'><span class='glyphicon glyphicon-user'></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR -->
提供一个工作示例请 –
没有人会帮助你在这里如果你提供的工作的代码。不要懒惰。来吧jules。你比这更好。请给我们工作小提琴协助。 –
不是懒惰的伴侣，我刚刚确定了我正在使用的代码。所以你想要一个小提琴，没有问题队友 – Jules