Question

我对css有一个非常简单的问题，但解决方案并没有找到我。关于在网格中定位元素，我希望网格元素看起来像this，但它们看起来像this。我尝试将一个标签放在另一个标签内，然后尝试从中移除盒子模型（边距和填充），但div是偏移的。我已尝试在div标签内嵌套，但这也不起作用。

我试图做一个jsfiddle，但它没有正确加载。 Fiddle。 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>

只是fyi的bootstrap col-md-1到col-md-12都是bootstraps网格定位系统。我认为他们必须加起来才能形成一条线。 Here是我正在使用的bootstrap html。和grid css。和bootstrap

Answer 1

您的jsfiddle显示不正确，因为默认的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 -->

bootstrap css定位困难

1 个答案: