html - 1 个像素会导致 Bootstrap 列溢出，还有如何使我的列大小动态化？

Question

<div class="row">
    <div class="col-xs-3 col-centered">
        <nav class="navbar navbar-default navbar-bottom">
            <?php wp_nav_menu( array( 'menu' => 'Header',
                                'items_wrap' => '<ul class="nav navbar-nav">%3$s</ul>',
                      'walker' => new Custom_Walker_Nav_Menu ) ); ?>
        </nav>
</div>


/* css*/

.navbar-nav {
display:table;
width:100%;
margin: 0;
}
.navbar-nav > li {
display:table-cell;
text-align:center;
border-right: black 1px solid;
}

.col-centered
{
display: block;
float: none;
margin: 0 auto;
}

我有一个导航栏，其中包含自定义数量的导航按钮。我尝试添加 border-right: black 1px solid 以帮助显示按钮之间的分隔，但这会导致列溢出。

我还有一个问题，如果我让列 1 比按钮的数量大，最后会有额外的空白，如果它比按钮的数量小 1 那么它会打破直线还有。

如何使 1 像素边框不会导致溢出，以及如何使列动态适应导航按钮的数量？

Answer 1

这是因为您使用的表格容器太小，如果添加更多宽度，导航将强制换行。您的表类是 col-xs-3它使用了总共​​ 12 个可用的“ block ”中的 3 个。

更改该行以使用 <div class="col-xs-12 col-centered">它应该适合使用整个宽度。希望对您有所帮助。

编辑根据您在下方的评论 here is a JS.Fiddle with the code我说的是。