我阅读了有关 navbar-nav 的信息，但我没有使用它，因为它从我的 li 元素而不是行创建了一个列表。
如果我想达到它，我应该添加这个 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 下的头部更改为 <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布局框架。我明白我的显示有问题:表格行。我使用它是因为我想在行内创建高度相等的列 Bootstrap 3 responsive columns of same height
Reference the Respond.js script after all of your Css
.更新 2
我将导航栏更改为默认 Bootply .但它看起来仍然与我想要实现的结果不同。我失去了在 navbar addind 内对齐我的 Notification 链接和表单元素的可能性，而 navbar-btn 没有帮助。我不能为输入字段做响应宽度。 Bootstrap 3 - How to maximize input width inside navbar .此解决方案仅适用于输入组。请帮助我了解如何创建
最佳答案
这个例子是在 Bootstrap 3.2 中，它修复了组件的错误，但这可能不是这里的问题。您的 CSS 非常困惑，很难确定哪些内容在 IE8 中不起作用。
我会构建自己的组件而不使用 Navbar，它不适合您使用。在不熟悉源 CSS 的情况下重写这么多确实不是一个好主意。
像您一样，避免在具有 box-sizing:border-box 的元素上使用边距，尤其是当它们试图适应流体容器时。你在 col-- 类上有边距，这会把事情搞砸。
HTML:(要求在通过相对路径链接 CSS 和本地托管的 CSS 之前，按照他们的说明将 respond.js 正确安装在头部。)
注意:html 和 CSS 不完整，小视口(viewport)样式还没有做。您在最小宽度媒体查询之前放置了所有视口(viewport)大小之间共享的公共(public)内容。如果它对所有媒体查询都是通用的，但如果有细微差别，您可以删除该样式，因此，如果小视口(viewport)上有填充但大视口(viewport)上没有填充，请删除大视口(viewport)上的填充，但如果有外观上的完全不同，然后将小视口(viewport)样式仅放在最大宽度中，该宽度比最小宽度小 1px。
<div class="control-bar container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".control-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse control-collapse">
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Go!</button>
</span>
</div>
<!-- /input-group -->
</div>
<!--/.col-*-3 -->
<div class="col-sm-5">
<div class="row">
<div class="col-sm-4 indicator active">
<span class="title">Word</span>
<span class="number">1</span>
</div>
<!--/.col-*-4.indicator :: nested -->
<div class="col-sm-4 indicator">
<span class="title">Word</span>
<span class="number">2</span>
</div>
<!--/.col-*-4.indicator :: nested -->
<!--/.col-*-4 :: nested -->
<div class="col-sm-4 indicator">
<span class="title">Word</span>
<span class="number">3</span>
<span class="notice">word</span>
</div>
<!--/.col-*-4.indicator :: nested -->
</div>
<!--/.row (nested) -->
</div>
<!--/.col-*-7 -->
<div class="col-sm-3 col-sm-offset-1 icon-link">
<a href="#"><i class="glyphicon glyphicon-home"></i> icon link goes here</a>
</div>
<!--/.col-*-3 -->
</div>
<!--/.row -->
</div>
<!--/.nav-collapse -->
</div>
<!--/control-bar.container-fluid -->
CSS
.control-bar {
background: #333;
color: #fff;
clear: both;
}
.control-bar a {color:#fff}
.control-bar .control-collapse {
clear: both;
width: 100%;
padding: 0 15px 20px;
}
.control-bar .icon-bar {
background: #fff;
}
.indicator:hover,
.indicator.active {
border-bottom-color: orange
}
.indicator {
padding: 10px 15px;
border-bottom: 5px solid transparent;
}
.icon-link a {
padding: 10px 0;
display: block;
}
/* how it looks on larger viewports*/
@media (min-width:768px) {
.control-bar .control-collapse {
display: inline!important;
padding: 0;
}
.indicator {
height: 100px;
padding: 5px 0 0 0;
display: table;
}
.indicator span {
display: table-row;
text-align: center;
font-size: 14px;
border: 1px solid red;
vertical-align: middle;
}
.indicator .title {
font-size: 15px;
text-transform: uppercase;
}
.indicator .number {
font-size: 20px;
color: orange;
}
.indicator .notice {
font-size: 12px
}
/* height of parent minus by height of element divided by 2 */
.control-bar .input-group {
margin-top: 33px
}
.icon-link {
text-align: right;
padding-top: 28px;
}
}
关于html - Bootstrap 3.1.1 中导航栏内相同高度的响应元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25728955/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda
我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm