个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
目前我的下拉菜单有效，但当它下拉时，菜单项位于左上角站点标题的顶部。我怎样才能将它们推到上面写着“技术站点”的地方，这样它们就不会像这张图片中那样被压扁了。
这是一个 jsfiddle，尽管我无法让实际的下拉菜单在 jsfiddle 中工作。 https://jsfiddle.net/uc83z5zb/1/
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 3</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<div class = "navbar navbar-inverse navbar-static-top">
<div class = "container">
<a href = "#" class = "navbar-brand">Tech Site</a>
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class = "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav">
<li><a href = "#">Specs and Features</a></li>
<li><a href = "#">How To Videos</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Social Media <b class = "caret"></b></a>
<ul class = "dropdown-menu ">
<li><a href = "#">Twitter</a></li>
<li><a href = "#">Facebook</a></li>
<li><a href = "#">Google+</a></li>
<li><a href = "#">Instagram</a></li>
</ul>
</li>
<li><button id="buyButton" type="button" class="btn btn-primary">Buy Now</button></li>
</ul>
</div>
</div>
</div>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
#buyButton {
position:relative;
top:7.5px;
}
CSS
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-brand{
position:relative;
left:224 px;
}
.nav navbar-nav{
margin-top:100px;
}
}
最佳答案
您在 .container 之后缺少 navbar-header 类。参见 Docs .
@media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
@media (max-width: 767px) {
#buyButton {
margin-left: 15px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Tech Site</a>
</div>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav">
<li><a href="#">Specs and Features</a>
</li>
<li><a href="#">How To Videos</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <b class = "caret"></b></a>
<ul class="dropdown-menu ">
<li><a href="#">Twitter</a>
</li>
<li><a href="#">Facebook</a>
</li>
<li><a href="#">Google+</a>
</li>
<li><a href="#">Instagram</a>
</li>
</ul>
</li>
<li>
<button id="buyButton" type="button" class="btn btn-primary navbar-btn">Buy Now</button>
</li>
</ul>
</div>
</div>
</div>关于javascript - 下拉菜单项在标题旁边而不是在标题下面被压扁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35045856/
24
4
0
我知道以前也有人问过这个问题，但似乎没有答案适用于我。 我在 DIV 容器中有一个表。当表格内有 5 行时，会显示 x 轴上的滚动条，但是，您可以看到第 1 列中的内容被压扁了。 第 2 列和第 3
我在导航栏中设置了一个搜索栏作为标题 View 。在初始 View 中，搜索栏在中间均匀分布，两侧都有按钮。在此 View 中，后退按钮会插入搜索栏，使其变得不均匀。我尝试删除后退按钮的文本，但仍然无
我有一个按日期和“结果”分组的 Pandas DataFrame: api_logs.groupby([api_logs.index.date, 'Outcome']).size()
我是一名优秀的程序员,十分优秀！