Question

我刚加入StackOverflow，因为我最近回到了网页设计，而且我正在学习Bootstrap。我正在设计自己的网站，而且我已经面临一个我无法解决的问题。我希望实现以下目标：Workflow当屏幕尺寸变得如此之小以至于使图标以垂直方式而不是常规水平方式（希望我正确解释）时，我也想让箭头消失。

我已经尝试了一些事情并且失败了：

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

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

很抱歉没有将代码上传到代码段中，尝试过但无法让它发挥作用，所以希望你们能得到这个想法......很高兴！

编辑：

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

Answer 1

这个怎么样？

而不是使用七列上的flex display和七列cols 上的flex:1来计算和分配每个项目的宽度让它灵活地成长和收缩。
当最大宽度达到特定宽度阈值时，更改flex-direction to 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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/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="https://i.stack.imgur.com/QqJno.png" class="arrow1">
    </div>
    <div class="no-padding">
      <img src="http://via.placeholder.com/100x100">
      <h4>Amazing Results</h4>
    </div>
  </div>

  CSS:

Answer 2

https://jsfiddle.net/azorbet/wuxogkm7/

.flex-box{
  display: flex;
}
.fb-col{
  display:flex;
  min-width: 150px;
  text-align: center;
}
.fb-col:nth-child(2) img,
.fb-col:nth-child(6) img{
  margin-top: auto;
}
.fb-col:nth-child(4) img{
  margin-bottom: auto;
}
@media (max-width: 767px){
  .hidden-xs{
    display: none;
  }
  .flex-box{
    display: block;
  }
}
.fb-img {
    width: 90px;
    height: 55px;
    border-radius: 100%;
    background-color: #a2a0ff;
    padding-top: 35px;
    margin: 4px auto;
}

<div class="flex-box">
<div class="fb-col"><div class="fb-img">Image1</div></div>
<div class="fb-col hidden-xs"><img src="https://i.stack.imgur.com/QqJno.png" /></div>
<div class="fb-col"><div class="fb-img">Image2</div></div>
<div class="fb-col hidden-xs"><img src="https://i.stack.imgur.com/17ox3.png" /></div>
<div class="fb-col"><div class="fb-img">Image3</div></div>
<div class="fb-col hidden-xs"><img src="https://i.stack.imgur.com/QqJno.png" /></div>
<div class="fb-col"><div class="fb-img">Image4</div></div>
</div>

Bootstrap 3：如何在12列中显示7个图像

2 个答案: