引导：导航栏行与显示：表格不起作用，宽度：100%和垂直对齐：中间

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%不工作。如果你在小提琴中检查元素，你会看到navbar和container拉伸了屏幕的整个宽度，但row没有。这一点在最后一个CCD_ 5具有CCD_。正如你在小提琴中看到的，推车按钮和屏幕的右边缘之间仍然有一个间隙

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

Answer 1

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

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