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 (слева), я смог Выполните sh это визуально, изменив

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

на

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

, добавив col-4 .

Это визуальное изменение, которое я хочу:

Но теперь, когда я изменяю размер браузера, текст Box 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>