grid - Bootstrap col-xs-6 仍然堆叠而不是并排显示 2 个 png 图像
问题描述
我有 6 张 png 图像,在 col-lg-2 和 col-sm-4 上查看时它们看起来不错,但在 col-xs-6 上,它每行仅显示 1 张图像,所有图像都堆叠在一起。
感谢您的时间!
<div class="container">
<div class="row">
<div class="col-lg-2 col-sm-4 col-xs-6 text-center">
<div class="mt-5 mx-auto">
<img src="img/python.png" height="75px" width="75px">
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 text-center">
<div class="mt-5 mx-auto">
<img src="img/ruby.png" height="75px" width="73px">
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 text-center">
<div class="mt-5 mx-auto">
<img src="img/javascript.png" height="70px" width="70px">
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 text-center">
<div class="mt-5 mx-auto">
<img src="img/html.png" height="75px" width="85px">
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 text-center">
<div class="mt-5 mx-auto">
<img src="img/css.png" height="75px" width="62px">
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-6 text-center">
<div class="mt-5 mx-auto">
<img src="img/angular.png" height="75px" width="70px">
</div>
</div>
</div>
</div>
解决方案
<div class="row flex-nowrap">
If not then
<div class="container flex-nowrap">
使用“flex-nowrap”对我有用,它迫使容器保持一致
推荐阅读
- python - 倒计时假期
- angular - PrimeNG DataTable 以编程方式选择行复选框
- java - duplicate-finder-maven-plugin:1.2.1:check -> 添加 Hibernate 依赖后发现重复的类/资源
- powershell - PowerShell 将输出发送到电子邮件
- prolog - 为什么我得到:未捕获的异常:错误(existence_error(程序,foggy/0),top_level/0)?
- node.js - 如何使用 Sequelize 中的输出参数在 SQL Server 中执行存储过程?
- vb.net - DataGridView CurrentRow Index 在 vb.net 上没有任何错误
- rest - Magento 2.1 - 无法通过 REST 更新客户自定义属性
- javascript - Webpack config error: An appropriate loader to handle this file type
- c++ - 在 C++ 中分析 vtable