引导-4并排卡宽度响应问题

Question

我在Bootstra-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">

加入-4-.

这做了我想要的视觉改变：

​

​

但是现在，当我调整浏览器的大小时，框1的文本剪辑在框外(不好！)我不想要)

​

​

在Bootstrap中有什么方法可以使盒子看起来像这样(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>