根据 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 ;
}
答案 0 :(得分: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 ...
“行是列的包装。每列都有水平填充 (称为装订线)以控制它们之间的空间。这个填充 然后在负边距的行上抵消...在网格中 版式,内容必须放在列中,并且只能将列 行的直系子级”