Question

我想像this picture中那样使列成为响应式网格。这就是我希望它在桌面模式下的样子。

在移动模式下，当我调整浏览器大小时，我希望它缩小并堆叠在一起。

我该怎么做？

这是我的代码：

.help-icons {
        height: 10rem;
        width: 10rem;
    }

    .icon-one,
    .icon-two,
    .icon-three,
    .icon-four,
    .icon-five,
    .icon-six {
        border: 1px solid $color-silver;
    }

    .dark-text {
        font-size: 0.7rem;
    }

    .light-text {
        color: $color-boulder;
        font-size: 0.5rem;
    }

.help-icons
        .icon-one
            span.wfs-pie-chart
            p.dark-text Some Text
            p.light-text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        .icon-two
            span.wfs-user
            p.dark-text Some Text
            p.light-text Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis natoque.
        .icon-three
            span.wfs-git-branch
            p.dark-text Some Text
            p.light-text Mauris nunc congue nisi vitae suscipit tellus mauris a diam.
        .icon-four
            span.wfs-database
            p.dark-text Some Text
            p.light-text Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum.
        .icon-five
            span.wfs-trending-up
            p.dark-text Some Text
            p.light-text Egestas sed sed risus pretium quam vulputate dignissim suspendisse in.
        .icon-six
            span.wfs-cloud
            p.dark-text Some Text
            p.light-text Proin fermentum leo vel orci porta non pulvinar neque laoreet.

谢谢！

编辑：我已经对移动设备，平板电脑和台式机有了媒体查询：

//- Mobile
@media screen and (min-width: 15rem){
}

// Tablet
@media (min-width: 768px) {
}

// Desktop
@media (min-width: 1280px) {
}

Answer 1

希望这会很有用。

.help-icons {
        width: 100%;
    }
.help-icons > div {
    width: 10rem;
    float: left;
    margin-left: 10px;
}

    .icon-one,
    .icon-two,
    .icon-three,
    .icon-four,
    .icon-five,
    .icon-six {
        border: 1px solid $color-silver;
    }

    .dark-text {
        font-size: 0.7rem;
    }

    .light-text {
        color: $color-boulder;
        font-size: 0.5rem;
    }

<div class="help-icons">
              <div class="icon-one">
                <span class="wfs-pie-chart"></span>
                <p class="dark-text"> Some Text</p>
                <p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
              </div>
               <div class="icon-two">
                <span class="wfs-user"></span>
                <p class="dark-text"> Some Text</p>
                <p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
              </div>
              <div class="icon-three">
                <span class="wfs-git-branch"></span>
                <p class="dark-text"> Some Text</p>
                <p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
              </div>
              <div class="icon-four">
                <span class="wfs-database"></span>
                <p class="dark-text"> Some Text</p>
                <p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
              </div>
              <div class="icon-five">
                <span class="wfs-trending-up"></span>
                <p class="dark-text"> Some Text</p>
                <p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
              </div>
              <div class="icon-six">
                <span class="wfs-cloud"></span>
                <p class="dark-text"> Some Text</p>
                <p class="light-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
              </div>
</div>

Answer 2

您可以使用Bootstrap的row和column类。这样，就不需要任何媒体查询，因为Bootstrap会为您完成所有操作。只要确保您在项目中安装了Bootstrap，即可在html中使用以下代码：

<div class="container">
 <div class="row">
  <div class="col-sm-4">
   <div class="row">
   </div>
   <div class="row">
   </div>
  </div>
  <div class="col-sm-4">
   <div class="row">
   </div>
   <div class="row">
   </div>
  </div>
  <div class="col-sm-4">
   <div class="row">
   </div>
   <div class="row">
   </div>
  </div>
 </div>
</div>

您可以查看Bootstrap的文档以了解不同的屏幕尺寸断点：https://getbootstrap.com/docs/4.1/layout/grid/。您还可以根据自己的喜好更改行和列的宽度和高度，方法是定位Bootstrap类或向Bootstrap类添加自定义类。

制作3个响应列？

2 个答案: