Bootstrap4-卡和网格并在一起吗？

Question

希望创建一个类似于此模型的布局sorta。顶部的长框将是标题/徽标区域，其他较小的框将具有标头，因此我对使用Bootstrap4卡很感兴趣。

[更新] 到目前为止，我正在尝试在ockup＃2中进行布局

https://jsfiddle.net/shifterofbits/ojgtmn80/

<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
          </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
          <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"></div>
          <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"></div>
          <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"></div>
        </div>
    </div>
    </div> 

当用户调整其浏览器窗口的大小时，如何防止每个框“缩放”或更改宽度。这是针对内部应用程序的，因此我们可以控制一些事情，而不必支持多种屏幕格式。

此外，卡片是否适合构建下面的第二种布局？ 请注意不同高度的盒子行，每个盒子都需要有固定的宽度。当/如果浏览器窗口确实缩放，则整个框将流动并且不会调整大小。

Answer 1

在CSS width: 200px;中为不想在不同屏幕分辨率下更改的框指定宽度。卡可以插入任何地方；除了第二个示例中的标头之外，您还可以将其设计为三行，第一行在右列中具有两个子行。同样，您可以将列宽设置为任意值。