首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Bootstrap col-xs-6仍在堆叠,而不是并排显示2个png图像

Bootstrap col-xs-6仍在堆叠,而不是并排显示2个png图像
EN

Stack Overflow用户
提问于 2018-08-12 03:06:36
回答 1查看 122关注 0票数 0

我有6个png图像,当在col lg-2和col sm-4下查看时,它们看起来很好,但在col xs-6下,它每行只显示一个图像,所有图像都堆叠在一起。

谢谢您抽时间见我!

代码语言:javascript
复制
<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>
EN

回答 1

Stack Overflow用户

发布于 2018-08-12 03:16:23

代码语言:javascript
复制
<div class="row flex-nowrap">

If not then

<div class="container flex-nowrap">

"flex-nowrap“的使用对我很有效,它迫使容器保持一致。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51802886

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档