【发布时间】：2014-11-01 22:47:58
【问题描述】：
我阅读了有关 navbar-nav 的信息，但我没有使用它，因为它从我的 li 元素而不是 row 中创建一个列表。
如果我想达到它，我应该添加这个 css
@media screen and (min-width: 768px) {
.navbar-nav {
width: 100%;
}
}
但是这段 css 并不能解决我的 IE8 问题
HTML 代码
<nav class="status-navbar navbar navbar-default" role="navigation">
<!-- Collect the nav links, forms, and other content for toggling -->
<div
class="collapse navbar-collapse container-fluid container-lg-height container-md-height"
id="bs-navbar-collapse-1">
<div class="row row-lg-height row-md-height" style="margin: 0;">
<div
class="col-lg-4 col-md-4 search-panel col-lg-height col-md-height col-middle">
<form class="navbar-form navbar-left search-form" role="search">
<div class="form-group col-lg-10 col-md-10">
<input type="text" class="search-input form-control input-lg"
placeholder="Twitter Quick Search">
</div>
<div class="col-lg-2 col-md-2">
<button type="button" class="btn btn-lg btn-primary">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</form>
</div>
<div class="col-lg-7 col-md-7 col-lg-height col-md-height col-middle">
<ul class="nav navbar-nav">
<li class="col-lg-2 col-md-2 metricItem underline"><span class="metricsLabel">FOLLOWING</span>
<span id="followingTweetIds" class="metricsValue">0</span></li>
<li class="col-lg-3 col-md-3 metricItem"><span class="metricsLabel">SAVED
SEARCHES</span> <span class="metricsValue">0</span></li>
<li class="col-lg-2 col-md-2 metricItem">
<span class="metricsLabel">TWEETS RETRIEVED</span>
<span id="tweetsRetrieved" class="metricsValue">0</span>
<div class="limitPane">
<span class="metricsLabel">( LIMIT</span>
<span id="limitRequests" class="limitRequests"></span>
<span class="metricsLabel">)</span>
</div>
</li>
</ul>
</div>
<div class="col-lg-1 col-md-1 col-lg-height col-md-height col-middle">
<ul class="nav navbar-nav">
<li><a href="#" id="notificationBtn" class="notificationBtn" style="font-size: 17px;">
<span class="glyphicon glyphicon-bell">Notifications</span>
</a></li>
</ul>
</div>
</div>
</div>
</nav>
请帮助我了解我应该使用什么 navbar-nav 以及如何在我的示例中使其成为跨浏览器解决方案。
链接到JSFiddle
更有趣的是，我将这个片段的位置从 bootstrap.min.css 下的 head 更改为 <body> 元素的底部。
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
现在在 IE 8 中看起来像
包含 resond js 的位置是我的错误。因为我使用jquery布局框架。我知道我的显示有问题：table-row。我使用它是因为我想在行内创建高度相等的列Bootstrap 3 responsive columns of same height
在所有 Css 之后引用 Respond.js 脚本
.更新 2
我将导航栏更改为默认Bootply。但它看起来仍然与我想要达到的结果不同。我失去了在导航栏中对齐通知链接和表单元素的可能性，addind navbar-btn 无济于事。我不能为输入字段做响应宽度。 Bootstrap 3 - How to maximize input width inside navbar。此解决方案仅适用于输入组。请帮助我了解如何创建
- 导航栏中相同高度的响应项
- 拉伸宽度表单（使用输入组而不是表单组）这样当我调整页面按钮大小时，下一行会向下
【问题讨论】：
-
您是否尝试过在页面顶部添加
html5shiv.js和respond.js？ -
@SimpleSandman 是的，如引导文档中所述
-
你能把你的头像和CSS贴出来吗？
-
@Aibrean 我更新了问题
-
bootply.com/jvB9PqNswZ 你真的需要修复你的代码。这不仅不接近如何在引导程序中制作导航栏，还包括不会加载的图片以及空的 div 和其他什么都不做的代码。所以我强烈推荐阅读文档。
标签： html css twitter-bootstrap twitter-bootstrap-3