ブートストラップの要素が重複しています

Question

私はvue.jsファイルにある非常に単純なブートストラップを持っています。 単に「場所：」の隣にある5フォント素晴らしいアイコンを表示します
<div v-for="location in 5"> 私は素晴らしいアイコンと、そのMDの間（位置のテキストを重複したフォントのまわりで私の画面をドラッグしていますしかし一方で、これは私の応答例ほとんどのために正常に動作します と私は予測するsm）。これはコンテナに入れてもそれでも起こります。

誰にも洞察力はありますか？あなただけcol-md-3を使用しているためだ

おかげ

<div id="location-section" class="section"> 
     <div class="row"> 
     <div class="col-md-3"> 
      <div >Locations:</div> 
     </div> 
     <div v-for="location in 5"> 
      <div class="col-md-3 "> 
      <i class="fa fa-flag" aria-hidden="true"></i> 
      </div> 
     </div> 
     </div> 
    </div> 

Answer 1

。 991pxを超える画面サイズでのみ反応するので、問題が発生しています。 col-xs-3を使用すると、すべての画面サイズで反応します。

はthis--

<div id="location-section" class="section"> 
    <div class="row"> 
    <div class="col-xs-3"> 
     <div >Locations:</div> 
    </div> 
    <div v-for="location in 5"> 
     <div class="col-xs-3 "> 
     <i class="fa fa-flag" aria-hidden="true"></i> 
     </div> 
    </div> 
    </div> 
</div> 

してみてください