bootstrap-4 并排卡宽度响应问题

Question

我在 Bootstrap-4 中有两个并排的卡片框，里面有文本和其他一些元素：

<div class="container-fluid">
  <div class="card-deck">

    <!-- Box 1 (left) -->
    <div class="card">
      <div class="card-body">
       
          Box 1
    
      </div>
    </div>
    
    <!-- Box 2 (right) -->
    <div class="card" >
      <div class="card-body">
       
          <div class="col">
            <h4 class="mb-2">
              Box 2 Title
            </h4>
            <p class="small text-muted mb-0">
              Box 2 Subtitle
            </p>
          </div>
        

        <div class="row no-gutters">
          <div class="col">col2</div>
          <div class="col">col2</div>
          <div class="col">col2</div>
          <div class="col">col2</div>
        </div>
        
        <div class="row no-gutters">
          <div class="col">col2</div>
          <div class="col">col2</div>
          <div class="col">col2</div>
          <div class="col">col2</div>
        </div>
        
      </div> 
   
    </div>

  </div>
</div>

目前这两个盒子的响应能力是完美的；如果我将浏览器的大小调整为超薄；文字永远不会离开盒子（很好！）

我希望框 2（右侧）比框 1（左侧）更宽，我可以通过更改直观地实现这一点

<!-- Box 1 (left) --> <div class="card">

到

<!-- Box 1 (left) --> <div class="card col-4">

通过添加 col-4。

这是我想要的视觉变化：

但是现在当我调整浏览器的大小时，框 1 的文本会在框外剪辑（糟糕！我不想要）

在 Bootstrap 中是否有某种方法可以使 Box 看起来像这样（Box1 比 Box2 略短），同时还保持完美的原始响应性，文本永远不会剪辑到框外？

谢谢

Answer 1

<div class="container">
          <div class="row">
            <div class="col-md-6">
              <div class="card mb-4 box-shadow">
                <div class="card-body">
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="card mb-4 box-shadow">
                <div class="card-body">
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                </div>
              </div>
            </div>
          </div>
        </div>