html - 如何减少 7 格 Bootstrap 页面中的列间距

问题描述

我正在使用 Vue.js 和 Bootstrap 开发一个应用程序。我使用以下代码创建了一个 7 列布局：

@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">&#xe2c9;</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>

虽然 7 列看起来不错，但每列之间有很多空间。列如下所示：

如何减少列之间的边距或空间？

标签： htmltwitter-bootstrapcssbootstrap-4

html - 如何减少 7 格 Bootstrap 页面中的列间距

问题描述

解决方案

推荐阅读