Question

我使用Bootstrap和HTML构建网站。有几次我发现自己在设计目的的代码中加入了换行符。这感觉很难，我想找到一个更好的方法来做到这一点。

示例1：我的页面顶部有一个导航栏。我将它包含在每个新页面中。当我在页面中输入内容时，它不会显示，因为它在导航栏后面，我需要在每个页面上显示3个换行符。

示例2：我有一个带侧边栏和中心页面的布局。即使边栏中的链接很少或中心页面中的内容很少，我希望它们都略低于屏幕尺寸。我觉得有一种更好的方法，而不是在每一页上都包含换行符......我也希望它们能够对齐。

所以，请帮助我解决一下如何解决这些问题。

Answer 1

将演示文稿与实际内容分开通常是个好主意，因此应使用CSS完成这些操作。（特别是，很少你想要使用换行符的情况：addresses, poems。）你可以用CSS做一些很好的东西很多但我无法在一个答案中解释这一点，所以请考虑阅读一本tutorial或一本书。

您的示例1可以通过向包含您的内容的元素添加margin-top来解决：

.content {
    margin-top: 100px; /* equal to the height of the navbar */
}

示例2有点复杂，但您可以使用@media查询根据用户屏幕的大小调整元素的宽度：

.sidebar {
    width: 200px; /* normal width */
}
@media (max-width: 500px) {
    .sidebar {
        width: 100px; /* reduced width for smaller screens */
    }
}

为了设计目的，避免HTML中的换行符

1 个答案: