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
Post a Comment