Bootstrap 'row's 不工作，但 'col's 做
Posted
技术标签:
【中文标题】Bootstrap \'row\'s 不工作，但 \'col\'s 做【英文标题】：Bootstrap 'row's not working but 'col's doBootstrap 'row's 不工作，但 'col's 做 【发布时间】：2021-06-11 19:13:26 【问题描述】：正如标题所说，我很确定我正确设置了引导程序，并且除了运行此页面之外的所有内容都显示了所有正确的 div 和大小列，但是所有“行”标签都被忽略了。他们只是被扔到到处都是。它们不应该一个一个地叠放在另一个上面吗？
我真的不想硬编码职位，我希望这是响应式的。
我为此附加了一些 CSS，但它的引导程序给我带来了问题。
<body>
% block body %
<div class='row banner'></div>
<div class='row header'>
<div class='col-4 image'></div>
<div class='col-8 bio'></div>
</div>
<div class='row profile'>
<div class='col-3' style='justify-content: center; align-items:flex-start;'>
Followers
<div class='followers'></div>
</div>
<div class='col-6'></div>
<div class='feed'></div>
</div>
<div class='col-3' style='justify-content: center; align-items:flex-start;'>
Following
<div class='following'></div>
</div>
</div>
% endblock %
</body>
【问题讨论】：
【参考方案1】：请像这样更正 html 代码。
<body>
% block body %
<div class='row banner'></div>
<div class='row header'>
<div class='col-4 image'></div>
<div class='col-8 bio'></div>
</div>
<div class='row profile'>
<div class='col-3' style='justify-content: center; align-items:flex-start;'>
Followers
<div class='followers'></div>
</div>
<div class='col-6'>
<div class='feed'></div>
</div>
<div class='col-3' style='justify-content: center; align-items:flex-start;'>
Following
<div class='following'></div>
</div>
</div>
% endblock %
</body>
您的代码中有一些错误。 首先，在 % endblock % 之前丢失了 div-end 标签。 然后，您在标签内混合了普通标签和标签。 这会破坏您的响应式风格。
【讨论】：
我在发布此内容后立即注意到该错误，这是在排除故障时出现的错误。然而，这些行仍然不正确。 请告诉我你到底想要什么。图片将有助于了解您的要求。以上是关于Bootstrap 'row's 不工作，但 'col's 做的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4 float-right 在 .row 内
Div row-fluid 在 Django 和 Twitter-Bootstrap 中不起作用