个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我对 bootstrap 和 html/css 比较陌生，到目前为止我相处得很好。我一直试图做的是将导航栏的高度增加到 80px。我的问题是，现在我无法让导航栏的内容居中，它们太高了。
看起来像这样:https://gyazo.com/4ba22961033e9bafa13aac44a50de3f6
谢谢 :)
这是我的整个 CSS 代码:
* {
box-sizing: border-box;
}
body {
background-color:#f6f6f6;
background-image: url("img/bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size:cover;
overflow-x:hidden;
overflow-y:scroll;
margin:0;
padding:0!important;
}
.navbar {
position: relative;
border:1px solid transparent;
min-height: 80px;
border-top: 0;
border-bottom:1px solid #e7e7e7;
margin-bottom:0;
z-index: 100;
}
.navbar-default {
height: 80px;
}
.navbar-brand {
float:left;
font-size:18px;
line-height:80px;
height:80px;
padding:0 15px;
}
.navbar-toggle {
margin-top: 23px;
padding: 9px 10px !important;
}
.navbar-nav > li > a {
height: 80px;
padding-top:10px;
padding-bottom:10px;
line-height:20px;
border-left: 1px solid #e7e7e7;
}
.navbar-left {
float:left!important;
}
.navbar-right {
float:right!important;
margin-right:-15px;
}
.navbar-nav>li>.dropdown-menu {
margin-top:0;
border-top-right-radius:0;
border-top-left-radius:0;
}HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap required meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Links to stylesheets and scripts -->
<link href="style.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Test</title>
</head>
<body>
<!-- NavBar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Leaderboards</a></li>
<li><a href="#">Support</a></li>
<li class="dropdown">
<a class "dropdown-toggle" data-toggle="dropdown" href="#">(username&pp)
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Settings</a></li>
<li><a href="#">Statistics</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>最佳答案
尝试在 .navbar-nav > li > a CSS block 中添加以下 flex 属性:
display: flex;
align-items: center;
所以 .navbar-nav > li > a block 现在应该是这样的:
.navbar-nav > li > a {
display: flex;
align-items: center;
height: 80px;
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
border-left: 1px solid #e7e7e7;
}
关于html - Bootstrap Navbar 内容不居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45128302/
24
4
0
我仍在学习网页设计的诀窍，并且我无法理解一些事情是如何工作的...... 我创建了一个函数来切换导航栏标题背景颜色，我发现以下内容是正确的，但不确定原因: 作品: $(".navbar.navbar-
在 Twitter bootstrap 2.3.2 中，我可以有类似的东西: http://jsfiddle.net/aQwUZ/3/
我是 bootstrap、jquery 和 javascript 的新手，我在一个网站上工作，但我遇到了一个问题。 . .我需要顶部的导航栏在超小屏幕上以折叠状态加载。现在，该栏在 XS 屏幕上是垂直
我正在学习使用 Ruby on Rails 编写代码，并且正在制作一个随机网页。我添加了 Bootstrap 导航栏。 我正在尝试将导航栏的边框更改为无，而不是: .navbar { bord
每当我学习 ionic 的教程时，我都会看到短语 *navbar。这是什么意思？我知道 * 表示它在模板中插入标签，但无法真正理解这个表达式.. 最佳答
我不知道如何正确表达这一点，但我想做的是让顶部栏( http://puu.sh/iNdBj/7f11027db0.png )在向下滚动时折叠并在回到顶部时重新出现，我想让底部栏填充顶栏的位置。 目前的
这是我第一次使用 bootstrap，我使用 roots 主题作为准系统模板。我在 header-top-navbar.php 的 navbar-header 元素中放置了一个图像我还将它放在一个 d
在我网站的顶部，主要的导航类是: navbar navbar-default navbar-fixed-top bg 我正在努力做到这一点，当你滚动时，类会更改为这样我就可以创建一个更优雅、更简单的滚
这是我的问题: collapse problem 如您所见，我的 navbar-collapse div 进入了导航栏区域。你能帮我解决一下吗？ Title
我已经为类尝试了很多不同的选项来更改 navbar 上的文本颜色，特别是 navbar-brand 元素。我的 .navbar-brand color:purple; CSS 类没有运行。你能帮我弄清
我正在尝试使用 nav navbar-nav navbar-right 创建一个下拉菜单。我让它在移动设备(较小的屏幕)上对齐但是当我点击下拉菜单时它不会将菜单项向下推但是而是下拉其他菜单项。我不确定
我的导航栏没有改变颜色。 Navbar.jsx 文件中的 Navbar.css 文件的路径是否正确？ import React, { Component } from 'react'; import
我无法让我的 navbar-header 和 navbar-nav 元素正确排列。 navbar-header 在 navbar 中垂直居中，而 navbar-nav 看起来像是 align="top
当我的屏幕宽度达到 767px 时，导航会异常折叠。当我转到 768px 时，navbar-nav 会低于 navbar-brand。直到我达到 795px，navbar-brand 和 navbar
我正在尝试实现一个固定的导航栏，但是在一定的屏幕尺寸(〜宽度:989)之后，导航栏向下移动。它也不适用于移动设备。 图片: 导航栏完全贴在页脚上，而不是停留在页面顶部。 您可以在以下位置查看代码:ht
我正在尝试右对齐我的 NavBar，但每当我添加 float:right 时，导航栏都会向右移动，但似乎已禁用。 参见此处:goo.gl/46yUrt 代码: /** * 4.2 Navigatio
我正在使用 Bootstrap 4，我希望我的 navbar-toggler 出现在 navbar-brand 之前，例如 this ，但是如果我将 navbar-toggler 放在第一位，我的对齐
如何使 navbar-header 全宽或单独成一行？ 我在 collapse navbar-collapse 上添加了 clear:both; 但所有的填充都弄乱了。
.navbar 和 .navbar a 有什么区别 .navbar { overflow: hidden; background-color: #333;
在 Twitter bootstrap 的 starter-template.html 中，navbar 写成 ... 但是，如果我将标记更改为
我是一名优秀的程序员,十分优秀！