如何使列仅在特定断点处拉伸？

Question

我了解到可以通过给它提供col类来使列增长：

<div class="container">
  <div class="row">
    <div class="col">This will stretch</div>
    <div class="col-auto"></div>
  </div>
</div>

但是，如果我希望此列在小屏幕上显示完整宽度并仅在 medium 屏幕上在同一行上拉伸，该怎么办？

Answer 1

改为使用col-sm和col-sm-auto。然后，这两列将叠加在移动设备上...

<div class="container">
  <div class="row">
    <div class="col-sm bg-info">This will stretch</div>
    <div class="col-sm-auto">|</div>
  </div>
</div>

https://www.codeply.com/go/KnA4Ivp9Aq