为什么 col-md 不能在 bootstrap 4 中处理内部卡？

Question

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

我需要在桌面模式下为两列分隔卡 div。我的意思是“这应该在左侧”应该显示在左侧，而“这应该在右侧”应该显示在右侧。

我使用以下 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-blockdiv的更新代码。希望这可以帮助。

<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>