I'm currently working on an application using Vue.js and Bootstrap. I've customized a 7-column layout with the following code:
@media (min-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%;
max-width: 14.285714285714285714285714285714% !important;
flex:none !important;
}
}
@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%;
max-width: 14.285714285714285714285714285714% !important;
flex:none !important;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="row seven-cols">
<div class="col-md-1" v-for="(folder,index) in folders">
<stats-card>
<div slot="header" :data-key="index" class="folder-rectangle" @click="selected=index" :class="{'folder-selected':selected==index}">
<div class="row">
<div class="col-2">
<div class="clearfix" v-if="folder.shared" style="margin-top: 8px; margin-left: 10px;">
<i class="material-icons" id="folder-image"></i>
</div>
<div class="clearfix" style="margin-top: 8px; margin-left: 10px;" v-else>
<i class="material-icons" id="folder-image">folder</i>
</div>
</div>
<div class="col-10">
<div class="clearfix">
<div class="row">
<p class="folder-name-style">{{folder.name}}</p>
</div>
<div class="row">
<p class="folder-size-style">{{folder.numFiles}} files</p>
</div>
</div>
</div>
</div>
</div>
</stats-card>
</div>
</div>Even though the 7 columns are displayed properly, there seems to be excessive space between each column. Here's how they currently look:
https://i.sstatic.net/R8hFD.png
What would be the best way to reduce this spacing between the columns?