首页 > 解决方案 > 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>

标签: grid

解决方案


<div class="row flex-nowrap">

If not then

<div class="container flex-nowrap">

使用“flex-nowrap”对我有用,它迫使容器保持一致


推荐阅读