twitter - bootstrap elements overlapping -


i have simple bit of bootstrap in vue.js file. the
<div v-for="location in 5"> prints 5 font awesome icons next "location:" works fine of responsive cases,however whilst dragging screen around font awesome icons overlap location text(when between md , sm predict). still happens if wrap in container.

has insight why?

thanks

 <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> 

that's because using col-md-3. makes responsive screen sizes greater 991px, hence having issue. use col-xs-3 make responsive screen sizes.

try 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> 

Comments

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

c# - Selenium Authentication Popup preventing driver close or quit -

tensorflow when input_data MNIST_data , zlib.error: Error -3 while decompressing: invalid block type -