Bootstrap4 - 卡片和网格在一起？答案

【问题标题】：Bootstrap4 - cards and grid together?Bootstrap4 - 卡片和网格在一起？
【发布时间】：2018-12-14 23:37:53
【问题描述】：

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

[更新] 到目前为止，我正在尝试在 mockup#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>

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

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

【问题讨论】：

如果你可以复制你已有的代码sn-p，jsfiddle等。这可以用card或divs完成，我会分享一个例子
另外，你的意思是使用 CSS Grid 或 Bootstrap 的 Grid 布局？
到目前为止你尝试了什么？
使用 jsfiddle 查看更新

标签： bootstrap-4

【解决方案1】：

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

【讨论】：