html - Bootstrap 3 : how to 7 images in 12 columns

Question

我刚刚加入 StackOverflow，因为我最近回到了网页设计领域并且正在学习 Bootstrap。我正在设计自己的网站，但我已经面临一个我自己无法解决的问题。我想实现以下目标:Workflow我还想让箭头在屏幕尺寸变小时消失，使图标看起来垂直而不是常规的水平方式(希望我解释正确)

我已经尝试了一些东西但失败了:

1- 我没有在单独的 img 文件中使用每个图标/箭头，而是将它们保存在一个独特的 img 文件中并使用了 css“img-responsive”类。它在桌面上看起来不错，但文本在移动设备上看起来太小了。

2- 之后我又开始尝试让它与单独文件中的每个 img 一起工作，我在这里找到了一篇关于获得 7 个相等列的帖子，它似乎可以满足我的需要，但我无法获取图像尽可能接近我想要的，尝试了几种方法来去除列之间的排水沟但什么也没有，我认为这可能是获得 7 个相等列的原因，列本身具有固定宽度，不允许我摆脱他们的填充/边距。

这是我到目前为止所得到的:

HTML:

<div id="whyus" class="container-fluid text-center">
    <h2>Why Us?</h2>
        <div class="row seven-cols">
            <div class="col-md-1 no-padding">
                <img src="img/Heart_icon.png">
                <h4>Passion</h4>
            </div>
            <div class="col-md-1 no-padding">
                <img src="img/Arrow1.png" class="arrow1">
            </div>
            <div class="col-md-1 no-padding">
                <img src="img/Idea_icon.png">
                <h4>Ideas</h4>
            </div>
            <div class="col-md-1 no-padding">
                <img src="img/Arrow2.png" class="arrow2">
            </div>
            <div class="col-md-1 no-padding">
                <img src="img/Brain_icon.png">
                <h4>Work</h4>
            </div>
            <div class="col-md-1 no-padding">
                <img src="img/Arrow1.png" class="arrow1">
            </div>
            <div class="col-md-1 no-padding">
                <img src="img/Like_icon.png">
                <h4>Amazing Results</h4>
            </div>
        </div>

CSS:

.arrow1 {
padding-top: 75px;
}

@media only screen and (max-width: 768px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

@media (min-width: 1200px) {
.seven-cols .col-md-1,
.seven-cols .col-sm-1,
.seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

这是它目前的样子:Website Preview

很抱歉没有将代码上传到代码片段中，尝试过但无法正常工作所以希望你们能明白这个想法......非常感谢!

编辑:

-箭头:arrow1.png arrow2.png (修改了代码中的箭头，因为我刚刚意识到 arrow1 和 arrow3 是同一个......我还想提一下，我给了他们一个类，以便为他们添加一些填充，所以他们看起来就像我在Workflow 中帖子的开头)

Answer 1

这个怎么样？

• 不是计算和分配每个元素的宽度，而是在 seven-cols 上使用 flex display 并在 上使用 flex:1七列 div 使其灵活地增长和收缩。
• 当 max-width 达到某个宽度阈值时，将 flex-direction 更改为 column 并隐藏箭头。

.arrow1 {
  padding-top: 75px;
}

@media only screen and (max-width: 768px) {
  .seven-cols {
    display: flex;
    flex-direction: column;
  }
  .arrow1,
  .arrow2 {
    display:none;
  }
}

@media (min-width: 769px) {
  .seven-cols {
    display: flex;
    justify-content: center;
  }
  .seven-cols>* {
    flex: 1;
    max-width: 14%;
  }
  .no-padding .arrow1,
  .no-padding .arrow2 {
    width: 80%;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="whyus" class="container-fluid text-center">
  <h2>Why Us?</h2>
  <div class="row seven-cols">
    <div class="no-padding">
      <img src="http://via.placeholder.com/100x100">
      <h4>Passion</h4>
    </div>
    <div class="no-padding">
      <img src="/image/QqJno.png" class="arrow1">
    </div>
    <div class="no-padding">
      <img src="http://via.placeholder.com/100x100">
      <h4>Ideas</h4>
    </div>
    <div class="no-padding">
      <img src="/image/17ox3.png" class="arrow2">
    </div>
    <div class="no-padding">
      <img src="http://via.placeholder.com/100x100">
      <h4>Work</h4>
    </div>
    <div class="no-padding">
      <img src="/image/QqJno.png" class="arrow1">
    </div>
    <div class="no-padding">
      <img src="http://via.placeholder.com/100x100">
      <h4>Amazing Results</h4>
    </div>
  </div>

  CSS: