Question

我在Bootstrap卡内输入有问题。我希望它的行为像第二张卡上的按钮一样，但是以某种方式它会缩小并保持在行中。我尝试添加一些min-width或修复其width，但无法使其与按钮的响应行为配合使用，该按钮在特定的屏幕宽度上堆叠在另一个按钮的上方，并且会缩小和扩展。

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

只需使用12个可用的列将包装器列更改为col-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>

Bootstrap 4输入调整大小行为

1 个答案: