引导程序显示为一列而不是两列

Question

标题几乎说明了一切。我希望看到两个专栏，但这并没有发生。非常感谢您的帮助。代码可在此处找到：https://codepen.io/jar5/pen/NWWXBro

我在谷歌上搜索了很多，并测试了我能找到的每一个解决方案。

为了节省空间，我剪切了列表中的一些项目，但您可以在codepen链接中看到完整的代码。

<div>
<div id="question" class="col-6">
<h2>Question 1:</h2>
<p>Here's a question with choices</p>
<ul class="list-group">
<label for="0">
<li class="list-group-item">
<input id="0" type="radio" name="answer" value="0">Choice 1
</li>
</label>
</ul>
</div>
<div class="col-3 infobox">
<h4>This should be on the next column</h4>
</div>
</div>

没有错误消息。底部的<h4>应该显示在第二列中。

Answer 1

您需要从<div class="row" id="quiz">中删除style="display: block;"。row类在bootstrap 4中具有flex属性，以允许在列中显示col-类的子级，因此您的代码应该类似于以下

<div class="row" id="quiz">
<div id="question" class="col-6">...</div>
<div class="col-3 infobox">...</div>
</div>