Question

我习惯用XML设计Android布局，我想知道我在目前正在制作的HTML设计中是否可以从中得到相似之处。特别是，我有：

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

This是我正在处理的模板。在原版中，顶部栏不是图像徽标，而是navbar-brand，所以一切似乎很好地融合在一起。我已将“SB-Admin”替换为顶部，标识（.png）明显更大。结果是，相当多的内容以及侧导航栏中的“n”已被掩盖。

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

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

<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作为Docs状态添加到body：

需要身体填充

固定的导航栏将覆盖您的其他   内容，除非你添加填充到顶部。试试你的   自己的价值观或使用下面的代码段。提示：默认情况下，导航栏是   50px高。

body { padding-top: 70px; }

就像文档继续一样，你是非常重要的

确保在核心Bootstrap CSS之后包含。

这样您就不必为所有看似被固定导航条“阻止”的元素单独添加margin-top。

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

1 个答案: