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略短），同时还保持了完美的原始响应能力，使文本永远不会被夹在盒子外面。

谢谢

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

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

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>