Question

我已经尝试过各种方式的边距/填充/边框选项，我无法从导航栏的末尾删除此空白区域。有人有一个简单的解决方案吗？图像附有详细的确切问题。感谢。

HTML:

    <div class="container-fluid">
        <div class="row">
            <ul class="list-inline clearfix">
                <li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
                    <a href="index.html" class="hvr-sweep-to-bottom"><i class="fa fa-home" san-serif hidden="true"></i><span>Home</span></a>
                </li>
                <li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
                    <a href="#" class="hvr-sweep-to-bottom"><i class="fa fa-ticket" aria hidden="true"></i><span>Tickets</span></a>
                </li>
                <li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
                    <a href="#" class="hvr-sweep-to-bottom"><i class="fa fa-commenting" aria hidden="true"></i><span>Video</span></a>
                </li>
                <li class="col-xs-6 col-sm-3 ul-menu-color menuitem">
                    <a href="#" class="hvr-sweep-to-bottom"><i class="fa fa-address-book" aria hidden="true"></i><span>Contact</span></a>
                </li>
            </ul>
        </div>
    </div>

CSS:

.menuitem{
    height: 120px;
    text-align: center;
    }

.menuitem a{
        width: 100%;
        text-decoration: none;
        color: #ffffff;
        height: 120px;
    }

.menuitem a i{
    padding-top: 22px;
    display: block;
    color: #fafafa;
    font-size: 26px;
    }

    .ul-menu-color{
    background-color: #000;
    font-family: 'Creepster', cursive;
}

Answer 1

这种情况正在发生，因为您已将导航栏包含在div元素中。然后你要定义新的div元素。 Div是一个块级元素，这就是为什么要观察一个空格，它是两个块级元素之间的默认边距。尝试将它们封装在一个父div中，或者可以执行以下操作，

对于导航栏后的div，请使用css作为

div{ margin-top: -10px; }

我希望这会起作用

Answer 2

如果有人遇到这个问题，那是因为class =＆＃34; list-inline clearfix＆＃34;

我删除并添加了填充到UL，导航栏现在很完美。

Bootstrap网格 - 导航栏 - 边界问题

2 个答案: