为什么容器内的div元素默认不占用12列，而只占用1列？

Question

根据 Murach的.Net 书籍说明，我在理解bootstrap的网格系统时遇到了麻烦。

请阅读整篇文章，我知道如何解决这个问题（<div class="col-lg-12">Col x</div>，可以解决问题），我只是想知道为什么引导程序会以这种方式工作。

我确实从书中复制了一个示例，其中Column a和Column b应该使用bootstraps提供的12列来使用其网格系统，或者至少这是我从书中得到的。而且，这是完全相同的代码

<main class="container">
    <div class="row">
        <div>Column a</div>
        <div>Column b</div>
    </div>
    <div class="row">
        <div class="col-md-4">Column c</div>
        <div class="col-md-8">Column d</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-sm-6">Column e</div>
        <div class="col-md-8 col-sm-6">Column f</div>
    </div>
</main>

输出占据本书屏幕快照中12列的div（我的代码中第一个Column 1和Column 2“ group”分别为Column a和Column b ）。

但这就是我从中得到的

除非我当然应用了我在帖子中前面提到的技巧。

这是我在head部分中指定的

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap/min.js"></script>
<link href="style.css" rel="stylesheet" />

这是style.css：

.container 
{
    padding-top:1em;
}
.row 
{
    margin-bottom: 2em ;
}
.row div
{
    border: 1px solid black ;
    padding: 0.5em ;
    background-color:lightgrey ;
}

Answer 1

DIV的行为基于flexbox。 Bootstrap 4 row类是display:flex，因此当您有一个简单的DIV时，它只需跟随default flexbox behavior。这不是1列的单位，它只是采用内容的宽度，因为未指定增长或收缩。

Bootstrap 4 col-*类具有特定的属性设计，可在父级row内工作。例如flex-basis，max-width，padding等...

https://www.codeply.com/go/qvHVlTJshv

进一步了解Bootstrap docs ...

  

“行是列的包装。每列都有水平填充   （称为装订线）以控制它们之间的空间。这个填充   然后在负边距的行上抵消...在网格中   版式，内容必须放在列中，并且只能将列   行的直系子级”