引导css定位的困难

我对css有一个非常简单的问题，但我没有找到解决办法。这是关于在网格中定位元素的，我希望网格元素看起来像，但是它们看起来像。我试着把一个标签放在另一个标签里面，然后尝试从中删除框模型（边距和填充），但是div是偏移的。我试着将两者都嵌套在div标记中，但这也不起作用

我试图执行JSFIDLE，但加载不正确。所需的随机代码下面的html

<div class="container">
<div class="row">
    <div class="col-md-12" style="height:85.3px">empty top</div>
</div>
<div class="row">
    <div class="col-md-4" style="height:85.3px">logo</div>
    <div></div>
    <div class="col-md-7" style="height:40px">head text
        <div class="col-md-7" style="margin-left:0px;padding-left:0px;margin-top:40px;box-sizing:border-box;">nav</div>
    </div>
</div>
</div>

空顶
标志
标题文本
导航

仅供参考，自举col-md-1至col-md-12是自举网格定位系统。我认为它们必须加起来12才能形成一条直线。是我正在使用的引导html。

---

还有。而且

您的JSFIDLE显示不正确，因为默认的iframe大小太小，但是您可以更改宽度，以符合您的问题的方式查看页面。您的问题是您错误地将一个

div

嵌套在另一个

div

中。请尝试以下操作：

<div class="container">
    <div class="row">
        <div class="col-md-12" style="height:85.3px">empty top</div>
    </div>
    <div class="row">
        <div class="col-md-4" style="height:85.3px">logo</div>
        <div class="col-md-8" style="height:45.3px">head text</div>
        <div class="col-md-8" style="height:40px;">nav</div>
    </div>
</div>
<!-- /container -->

空顶
标志
标题文本
导航

谢谢！嵌套在另一个中的div是我试图找出如何使其工作的。我唯一的问题是我不明白你的解决方案为什么有效，第三个div是如何出现在第二个div下面的？我不明白。谢谢。在bootstrap中，“col-md-x”类都有

float:left

样式。这会导致div水平堆叠到页面边缘，然后向下和向左层叠。“空顶”显然占据了整个页面，这会导致“徽标”向下撞到下一个可以水平放置的区域。“标题文本”位于“徽标”和页面末尾之间。“导航”无法在“标题文本”和页面末尾之间显示，因此它会级联到下一个可用空间。这有用吗？