我在使用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>


只是,引导程序col-md-1到col-md-12是引导程序网格定位系统。我认为他们必须加起来最多12才能形成一行。 Here是我正在使用的引导HTML。
 和grid css。和bootstrap

最佳答案

您的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 -->

关于css - Bootstrap CSS定位困难,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25275506/

10-12 12:18
查看更多