html - 如何在 HTML 中指定相对定位？

Question

我习惯于使用 XML 设计 Android 布局，并且想知道在我目前正在处理的 HTML 设计中是否可以从中得出相似之处。特别是，我有:

-------------------------------------------
| <img src="logo.png"                     |
-------------------------------------------
|  n  |
|  a  |
|  v  |           Content
|  b  |
|  a  |
|  r  |

This是我正在使用的模板。在原版中，顶部栏不是图像 Logo ，而是 navbar-brand ，因此一切似乎都很好地结合在一起。我用明显更大的 Logo (.png) 替换了顶部的“SB-Admin”。结果是相当多的内容以及侧导航栏中的“n”都被掩盖了。

我想弄清楚的是如何指定相对定位，或者我应该如何布置此页面以便显示所有内容？我正在寻找类似于 navbar:layout_below=logo.png 类型的 XML 内容。

目前我的解决方案是修改与导航栏和内容相关联的 .css 并为它们提供更高的“margin-top”，但这似乎是解决此问题的一种非常 hacky 的方法。所以我的问题是，有没有一种方法可以在 HTML 中指定相对定位，或者我是否应该在我的本地机器上用边距反复试验，或者，什么是正确的布局方式，以便三者中的所有内容我的示例中显示的 View 相互之间没有重叠？

<div id="wrapper"> 
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
        <img src="logo.png" class="navbar-brand">
    </div> 

    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav side-nav"> <!-- This only looks ok if I change side-nav margin -->
            <li class="active"><a href="index.html">Dashboard</a></li>
            <li><a href="charts.html">Adoption</a></li>
            <li><a href="tables.html">Usage Statistics</a></li>
            <li><a href="forms.html">Classifiers</a></li>
        </ul>
    </div>

    <div class="container">
        <p>Hey</p> <!--this top here gets cut off-->
        <p>Hey</p>
        <p>What's up?</p>
        <p>What's up?</p>
    </div>
</div>

编辑:不一定是相对布局，我正在寻找避免硬编码边距值的解决方案，这是我目前发现自己正在做的事情，或者如果这不是不好的做法，我也会接受一个解释为什么不这样做的答案(即这样的解决方案是否适用于所有屏幕尺寸？)。

Answer 1

当您使用固定在顶部的导航栏时，您需要将一些 padding-top 放入 body 作为 Docs状态:

Body padding required

The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

就像文档继续说的那样，你很重要

Make sure to include this after the core Bootstrap CSS.

这样您就不必为所有看起来被固定导航栏“阻挡”的元素单独添加 margin-tops。