Question

我正在使用Bootstrap来构建响应式设计。现在我想创建一个简单的响应式页脚导航。实际上事实并非如此简单。我目前正面临一个问题，并希望实现一个改进。

问题

一旦导航点开始堆叠，导航点的填充就会重叠，但它们不应重叠。我已经在网上做了一些研究并尝试了不同的方法，但到目前为止我都没有做过。

改进

导航点应在移动视图中堆叠，但应与更大的视口大小内联。我的感觉是，实现此功能请求也将解决上述问题。但我不确定如何正确设置bootstrap。

也许更有经验的开发人员可以建议如何归档这些目标。

我还在

创建了一个jsfiddle示例

<!DOCTYPE html> <!-- Bootstrap uses HTML5 elements and CSS3 properties -->
    <meta charset="utf-8">
    <!-- Enable IE compatibility mode. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Scales the viewport width and height to the max. browser window -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
<body>
<div class="container">
<div class="row">
    <div class="col-sm-12">
        <ul id="footer--navigation">
            <li><a href="#">Test-Category</a></li>
            <li><a href="#">Test-Category</a></li>
            <li><a href="#">Test-Category</a></li>
            <li><a href="#">Test-Category</a></li>
            <li><a href="#">Test-Category</a></li>
        </ul>
    </div>
</div>
</div>
</body>

https://jsfiddle.net/herbert_hinterberger/y6kcgkbe/1/

非常感谢提前。赫伯特

Answer 1

如果我正确理解您的问题，那么您只需要在页脚链接中添加display：inline-block：

#footer--navigation li > a {
    display: inline-block;
    padding: 15px;
    text-decoration: none;
    text-transform: uppercase;
}

如果不这样做，链接上的顶部和底部填充将不会被应用

Boostrap：导航点应在移动视图中堆叠，导航点内的填充不应重叠

1 个答案: