Question

我正在使用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列看起来不错，但每列之间都有很多空间。列如下所示：

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

Answer 1

在 col-md-1 padding-left: 0 !impostant;和padding-right: 0 !important;中添加这些CSS。然后间隙将被消除。

希望您的问题能够解决。

如何减少7网格Bootstrap页面中列之间的间距

1 个答案: