Bootstrap 4 Input изменяет размер поведения

Question

У меня проблема со входом внутри карты Bootstrap. Я хочу, чтобы он работал как кнопка на второй карточке, но каким-то образом он сжимается и остается в линии. Я попытался добавить min-width или исправить его width, но не могу заставить его работать с отзывчивым поведением кнопки, которая накладывается поверх другой на определенной ширине экрана, а также сжимается и расширяется.

Здесь - это код Bootsnipp и скриншот проблемы:

Редактировать: Добавление моего кода в сообщение в соответствии с просьбой: Это первая карта, та, с вводом.

<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
  <div class="card">
    <img class="card-img-top" src="https://dummyimage.com/600x600/55595c/fff" alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">
        <a href="product.html" title="View Product">Product title</a>
      </h4>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      <div class="form-row">
        <div class="col">
          <select class="form-control btn-block">
            <option>50</option>
            <option>100</option>
            <option>200</option>
            <option>300</option>
            <option>400</option>
            <option>500</option>
            <option>600</option>
          </select>
        </div>
        <div class="col">
          <a href="#" class="btn btn-success btn-block">Add to cart</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Просто измените столбцы-обёртки на col-12, используйте 12 доступных и добавьте немного нижнего поля к select с помощью mb-3. Следующая модификация кода должна работать, я проверил ее на вашем коде:

<div class="form-row">
  <div class="col-12 mb-3"> <!-- changes here ... -->
    <select class="form-control btn-block">
      <option>50</option>
      <option>100</option>
      <option>200</option>
      <option>300</option>
      <option>400</option>
      <option>500</option>
      <option>600</option>
    </select>
  </div>
  <div class="col-12"> <!-- ... and here -->
    <a href="#" class="btn btn-success btn-block">Add to cart</a>
  </div>
</div>