Bootstrap 4响应列

问题描述

最近尝试使用Bootstrap做响应式横幅广告。我昨晚和今天早上做了一些研究。如果已经回答了这个问题（如我怀疑），请告诉我可能在哪里可以找到答案。我设置了一个4列1行的网格。我在每列中都添加了一些内容。但是，当我充分减小浏览器窗口的大小时，它变成看起来像是4行而不是1行的内容。请检查正在调整尺寸的浏览器（chrome）的链接视频捕获。我使用的代码在下面的pastebin中。我如何一直将它们全部排成一排？

部分代码：

<div class="container touchpointContainer">
 <div class="row tall">
   <div class="col-sm-1 bootCol">
     <a onclick="advanceReview(-1)">
       <img class="prev" src="leftArrow.png"/>
     </a>
   </div>
   <div class="col-sm-8 bootCol">
  "Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore"
   </div>
   <div class="col-sm-2 bootCol">
     Image goes here
   </div>
   <div class="col-sm-1 bootCol">
     <a onclick="advanceReview(1)">
       <img class="next" src="rightArrow.png"/>
     </a>
   </div>
 </div>

完整代码：

https://pastebin.com/N2dYk5J5

调整大小的gif：

https://media1.giphy.com/media/VgfuWp1UiKPTqznZvc/giphy.gif

解决方法

发布此问题后，我进行了一些其他搜索。答案似乎存储在这里：

What is the difference among col-lg-*,col-md-* and col-sm-* in Bootstrap?

那里有一个很好的gif，可以准确地显示行为的样子。

答案是...要解决此问题，请使用col-1而不是col-sm-1。只需从所有列的类名称中删除“ sm”即可。