如果你看一下官方的例子http://getbootstrap.com/examples/justified-nav/,我注意到在IE 11上,li元素的宽度是合理的并且共享相同的宽度〜所有li元素大约是190px)。在Chrome / Webkit / Firefox浏览器等上,这种情况各不相同(例如,第一个li 175px,第二个li 192px等)。
我现在有一个项目,其中确切的数字...任何想法如何在IE上获得相同的行为然后在Chrome / Webkit / Firefox上?
编辑:它取决于内部元素的宽度
答案 0 :(得分:0)
为每个单元格(li元素)提供相等宽度的关键是将父元素设置为display:table
和table-layout:fixed
。并将列表元素宽度设置为100%。
添加/更改以下声明:
.nav-justified {
display: table;
table-layout: fixed;
}
.nav-justified > li {
width: 100%;
}
修改:添加了演示代码段
.nav-justified {
/* New declarations*/
display: table;
table-layout: fixed;
}
/* Use of greater selector specificity and !important is for demonstration purposes */
nav .nav-justified > li {
/* New declarations*/
width: 100% !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
<ul class="nav nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>