html - col-lg-8 没有使用屏幕的 8/12？

Question

大家好，我正在使用这段代码

<section id="post1">
<div class="container-fluid post-1">
    <div class="row">
        <div class="col-lg-12">
            <div class="col-lg-8 oblongbig">
            </div>
            <div class="col-lg-4">
                <div class="row">
                    <div class="=col-lg-6 oblong">
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 oblong">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section>

要创建三个框，请查看http://deliciousproductions.com.au

我的问题是第一个较大的框没问题，但后两个框应该在第一个 col-lg-8 之后开始，但它们刚好紧靠着大框开始，就好像没有填充/边距一样。我添加了 10px 的边距，这样更容易理解。那么 col-lg-8 的宽度不是屏幕的 8/12 吗？

行中的 2 个框也没有响应，但当您缩小页面时会发生这种情况:https://gyazo.com/4929147de70b0a88ac54d29f4ff2c243

最后是:gyazo[.]com/c57374233a4e0f14fc4f757841893cc5

当页面调整大小时，您会建议如何调整 2 个较小的框，以便它们在较大框的下方水平放置。这是一个博客风格的网站 btw。

干杯，尼克

这也是每个盒子的 css

.oblongbig {
float: left;
width: 600px;
height: 300px;
background-color: #050505;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
margin: 10px;

.oblongbig:hover, .oblong:hover {
background-color: #121212;

.oblong {
float: left;
width: 300px;
height: 150px;
background-color: #050505;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
margin: 10px;

类似于:demo

Answer 1

您的网格代码有问题。用这个

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <div class="col-lg-8">
                    <div style="height:330px;background:#000;"></div>
                </div>
                <div class="col-lg-4">
                    <div class="row">
                        <div class="col-sm-12">
                            <div style="height:150px;background:#000;margin-bottom:30px;"></div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div style="height:150px;background:#000;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

也不要直接在网格列上应用样式。将内容 div 放在网格列中，并在该 div 上应用您想要的任何样式。

查看此 URL 以更好地了解 Bootstrap 网格系统 - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php