Question

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

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

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

Answer 1

为每个单元格（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>

IE上的Bootstrap对齐导航行为

1 个答案: