为设计目的避免HTML中的换行

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

示例1：我的页面顶部有一个导航栏。我把它写在每一个新的页面上。当我在页面中键入某个内容时，它不会显示，因为它位于导航栏后面，我需要在每一页上为此设置3个换行符

示例2：我有一个带有侧边栏和中心页的布局。我希望他们都去一点低于屏幕大小，即使有很少的链接在侧栏或很少的内容在中心页。我觉得有比在每一页上都加换行更好的方法。。。我也希望他们保持一致

---

因此，请帮助我了解您通常如何解决这些问题。

将您的演示文稿与实际内容分开通常是一个好主意，因此应该使用。（特别是，很少有想要使用断线的情况：）你可以用CSS做很多事情，但是我无法用一个答案来解释这个问题，所以请考虑读一本书或一本书。 您的示例1可以通过向包含内容的元素添加

页边空白顶部

来解决：

.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 */
    }
}

---

如果您添加一个JSFIDLE，人们会更好地帮助您。也就是说，使用css！添加边距和填充，以帮助在+1左右移动文本，从而创建JSFIDLE并使用CSS。例如#1，这实际上取决于您的标记，但您需要执行类似.content{margin top:50px；}+1的操作来表达我的想法。我太懒了，没法做出真正的回答：）