ブートストラップ3：12列の画像を7つにする方法

Question

最近私がWebdesignに戻ってからブートストラップを学んでいるので、StackOverflowに参加しました。私は自分のウェブサイトをデザインしています。私はすでに自分自身を解決できない問題に直面しています。私は以下を達成したい：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

コードをスニペットにアップロードして申し訳ありませんが、試してみましたが、動作させることができませんでしたので、皆さんにはとにかくアイデアを得ることを願っています...大きな感謝！

EDIT：

-ARROWS：arrow1.pngarrow2.png（私はちょうど矢印1とarrow3は1と同じであることを認識コード原因で矢印を修正...私はまた、私は彼らにクラスを与えたことを言及したいと思いますいくつかの詰め物を追加するために、私はWorkflowの投稿の冒頭に示したように見えます）

Answer 1

どうやってですか？

• の代わりに、それが柔軟に成長し、縮小するために七COLSのdiv要素にflex display上七COLSとflex:1を使用して、幅を算出し、各項目を割り当てます。
• max-widthが特定の幅のしきい値に達すると、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>