css - 为什么 col-md 不能在 bootstrap 4 的内部卡上工作？

Question

请注意，我是开发人员，不是设计师。

我需要在桌面模式下将两列的卡片 div 分开。我的意思是“This should be in Left Side”应该显示在左侧，“This should be on right side”应该显示在右侧。

我使用以下 HTML。

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <div class="col-md-4">
      This should be in Left Side
    </div>
    <div class="col-md-8">
      This should be on right side
    </div>

  </div>
</div>

如果你想在线测试这里是 jsfiddle ( https://jsfiddle.net/uxfjwhpc/1/ )。

我的错误是什么以及如何改正？

Answer 1

col-* 类在包装在 row 类下时起作用。您可以在下面找到 card-block div 的更新代码。希望这会有所帮助。

<div class="card-block">
  <div class="row">
    <div class="col-md-4">
      This should be in Left Side
    </div>
    <div class="col-md-8">
      This should be on right side
    </div>
  </div>
</div>