无法使用Bootstrap v4 alpha 6

Question

我正在使用bootstrap v4 alpha 6而我正在尝试设计一张类似于此site上的布局的卡片。我创建了一个plnkr来演示我的问题。这是我想要创建的图片

当我向（col-6）添加行并尝试将该行拆分为3个相等大小的列时，会发生此问题，与clutch.io网站不同，page上的列折叠为3如果其中的内容太长，则分隔行。如果内容太长，我想垂直扩展列。

我做错了什么？

<div class="row" *ngFor="let sc of scs?.data">
  <div class="col-9">
    <div class="card">
      <div class="card-block">
      <div class="row">
        <div class="col-6">
          <div class="row" style="border-bottom: 2px solid;">
            <img class="d-flex mr-3 imgLogo float-left" [src]="storageURL + sc.imageURL" width="180" height="150">
            <h4>{{sc.company}}</h4>
          </div>
         <!-- Here is the second row which I would like to split into 3 columns-->
          <div class="row">
            <div class="col">
              hiasdasdasdl;aksd;laksjdlakjsd;alskjd;alskjd;alksjd;lakjsdl;aksjdlasjkdlakjsd
            </div>
            <div class="col">
              hiasdlkjasdljasldjalsdkadl
            </div>
            <div class="col">
              hilakjsdlaksdjlaskjdlaksdjlaskj
            </div>
          </div>
        </div>
        <div class="col-3">
          <div class="row">
            View Website
          </div>
          <div class="row">
            View Profile
          </div>
          <div class="row">
            Message
          </div>
        </div>
      </div>
    </div>
    </div>
    <br class="mb-3"/>
  </div>
</div>

Answer 1

为限制其宽度的这些列使用类，例如col-sm-3或col-sm-4：

https://codepen.io/anon/pen/xpjJWm