如何解决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>
完整代码:
调整大小的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”即可。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。