html - Bootstrap : navbar row with display:table not working with width:100% & vertical-align:middle

Question

请参阅此 fiddle :https://jsfiddle.net/5aw2w9w6/

代码是这样的:

<nav class="navbar navbar-default navbar-fixed-top" style="background-color:#FF0000">
  <div class="container">
    <div class="row" style="width:100%;display:table; table-layout:fixed; vertical-align:middle">
       <div class="col-xs-5 col-sm-2"style="display:table-cell; vertical-align:middle">
          <!-- content -->
       </div>
       <div class="col-xs-2 col-sm-8" style="display:table-cell; vertical-align:middle">
          <!-- content -->
       </div>
       <div class="col-xs-5 col-sm-2"style="display:table-cell; vertical-align:middle;text-align:right">
          <!-- content -->
       </div>
    </div>
  </div>
</nav>

2 个东西坏了:

1) 行上的 width:100% 无效。如果你在 fiddle 中检查元素，你会看到 navbar 和 container 拉伸(stretch)了屏幕的整个宽度，但是 row 没有。这一点在最后一个 col-xs-* 有一个 text-align:right 时也很明显。正如您在 fiddle 中看到的那样，购物车按钮和屏幕右边缘之间仍然存在间隙

2) vertical-align:middle 不工作。如果是这样，我希望购物车按钮不会触及屏幕的上边缘，而是相对于 Logo 图像(白色，这是第一部分中的内容)居中(垂直)对齐

Answer 1

1. 检查您的容器，它的最大宽度为 width: 750px; 这就是它不接触屏幕边缘的原因
2. 对于垂直居中对齐，请将高度设置为您的表格行，另一个不起作用的原因是因为每列的 float:left 尝试删除它，看看它会正常工作。

https://jsfiddle.net/nzjqua4s/1/