IE上的Bootstrap对齐导航行为

时间:2015-08-06 11:09:18

标签: css twitter-bootstrap

如果你看一下官方的例子http://getbootstrap.com/examples/justified-nav/,我注意到在IE 11上,li元素的宽度是合理的并且共享相同的宽度〜所有li元素大约是190px)。在Chrome / Webkit / Firefox浏览器等上,这种情况各不相同(例如,第一个li 175px,第二个li 192px等)。

我现在有一个项目,其中确切的数字...任何想法如何在IE上获得相同的行为然后在Chrome / Webkit / Firefox上?

编辑:它取决于内部元素的宽度

1 个答案:

答案 0 :(得分:0)

为每个单元格(li元素)提供相等宽度的关键是将父元素设置为display:tabletable-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>