[英]Why is my bootstrap grid system not working?
I don't get why my grid system is not being displayed as expected.我不明白为什么我的网格系统没有按预期显示。
Html code: html代码:
<header class="navbar navbar-dark navbar-expand bd-navbar bg-dark p-0 shadow">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-12 col-md-12 col-lg-3 text-sm-center text-md-center text-lg-left">
<a class="navbar-brand"><!-- img src is django code, ignore it-->
<img src="{% static 'images/logo.jpg' %}" class="rounded-circle" style="height:30px;width:30px;">
<label style="font-family: 'Oswald', 'DejaVu Sans Mono' !important; color:white;">Title</label>
</a>
</div>
<div class="col-sm-12 col-md-12 col-lg-9 text-sm-center text-md-center text-lg-left">
<!--my form here-->
</div>
</div>
</header>
The important thing is the lg
allingment here.重要的是这里的
lg
allingment。 You can see how I have a div
with 12 cols, which has two div
s inside, one with 3 cols and the other with 9 (so they make 12 in addition).你可以看到我有一个
div
有 12 个列,里面有两个div
,一个有 3 个列,另一个有 9 个(所以他们另外做了 12 个)。 The expected is to see them as explained in Grid system - Bootstrap .期望看到它们,如Grid system-Bootstrap 中所述。 But the result I'm getting is...
但我得到的结果是......
Why???!!!为什么???!!! Thanks!
谢谢!
Your col <div>
s should be placed inside row <div>
s as follows:您的col
<div>
应放置在row <div>
,如下所示:
<div class="row">
<div class="col-9"></div>
<div class="col-3"></div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.