时间戳

首页 > 解决方案 > Bootstrap 4 响应列

bootstrap-4 - 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

标签： bootstrap-4gridresponsive

解决方案

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

Bootstrap 中 col-lg-*、col-md-* 和 col-sm-* 有什么区别？

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

答案是……要修复它，请使用 col-1 而不是 col-sm-1。只需从所有列的类名中删除“sm”。

推荐阅读