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个较小的框时，你会建议如何调整大小，使它们在较大的框下面水平放置。这是一个博客风格的网站顺便说一句。

欢呼，尼克

这里也是每个盒子的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

要计算列，您需要考虑它们之间的间隔值。 Here you can see a visual explanation

Answer 2

您的代码中存在一些问题。要使Bootstrap列正常工作，不能在不启动行的情况下在另一列div中使用列div。例如，您必须将其格式化为：

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8">
      <div class="row">
        <div class="col-lg-6"></div>
        <div class="col-lg-6"></div>
      </div><!-- .row -->
    </div>
    <div class="col-lg-4"></div>
  </div><!-- .row -->
</div>

在您的示例中，您有两个嵌套列，其间没有行。这会弄乱你的列填充＆amp;边距。

请参阅文档：http://getbootstrap.com/css/#grid-nesting

接下来，您将自己的类（.oblong，.oblongbig）与set float，fixed width和margin应用于Bootstrap列div。这些都会覆盖Bootstrap样式并阻止列正常工作。

最好的想法是使用带有Bootstrap类的元素来构建布局，然后将元素放在这些布局元素中，并使用您自己的自定义类。例如：

<div class="col-lg-6">
  <div class="oblong">Your content here, separate from the Bootstrap element</div>
</div>

避免覆盖框架的样式，因为这会导致代码混乱。一旦重新格式化代码，以便列正确嵌套，并且您没有用自己的自定义宽度覆盖Bootstrap类，它应该按照您想要的方式组合在一起。

Answer 3

您的网格代码存在一些问题。使用这个

<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

col-lg-8不使用屏幕的8/12？

3 个答案: