用于响应流体的 Bootstrap 内部间距删除

Question

我正在尝试在我的店面 wordpress 中放置总共 6 个从右到右最上角浮动的社交媒体图标。我将这个容器放置在带有引导容器的头部上方。由于列之间的空间太大，请检查附加的图像.任何带或不带引导程序的建议。

在下面尝试过

  <div class="container-fluid">
    <div class="row no-gutter" >
        <div class="col-md-6"   style="background-color:#d9eaf2;color: #6666ccff;font-family: Roboto,Tahoma,Helvetica,sans-serif;font-size: 14px;margin-bottom: 6px;">
    </div>
  <div class="col-md-1"><img class="aligncenter size-full wp-image-240" src="#iconfinder_facebook_circle_color_107175-e1547916268272.png" alt="" width="28" height="28" /></div>
  <div class="col-md-1"><img class="aligncenter size-full wp-image-247" src="#iconfinder_instagram_circle_color_107172-e1547916926464.png" alt="" width="28" height="28" /></div>
  <div class="col-md-1"><img class="aligncenter size-full wp-image-246" src="#iconfinder_youtube_circle_color_107167-e1547916948298.png" alt="" width="28" height="28" /></div>
  <div class="col-md-1"><img class="aligncenter size-full wp-image-245" src="#iconfinder_pintrest__social__media__icon_2986063-e1547916959860.png" alt="" width="28" height="28" /></div>
  <div class="col-md-1"><img class="aligncenter size-full wp-image-244" src="#iconfinder_google_circle_color_107180-e1547916968579.png" alt="" width="28" height="28" /></div>
  <div class="col-md-1"><img class="aligncenter size-full wp-image-242" src="#iconfinder_twitter_circle_color_107170-e1547916988283.png" alt="" width="28" height="28" /></div>
    </div>
  </div>
  css
  /* remove spacing between middle columns */
  .row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
    padding-right:0;
    padding-left:0;
  }
  /* remove right padding from first column */
  .row.no-gutter [class*='col-']:first-child {
    padding-right:0;
  }
  /* remove left padding from first column */
  .row.no-gutter [class*='col-']:last-child {
    padding-left:0;
  }


  /* only for column content visible */
  .col-md-1>div {background-color:#ddd;}

请检查代码笔https://codepen.io/nhui77777777/pen/pqMOyZ

实际问题：

Answer 1

问题是您将每个图像添加到它们自己的列中，并且随着页面的增长，每个列的宽度都将比图像大得多。

您应该将所有图像放在同一列中并将其大小增加到col-md-6。

 /* remove spacing between middle columns */
  .row.no-gutter [class*='col-']:not(:first-child):not(:last-child) {
    padding-right:0;
    padding-left:0;
  }
  /* remove right padding from first column */
  .row.no-gutter [class*='col-']:first-child {
    padding-right:0;
  }
  /* remove left padding from first column */
  .row.no-gutter [class*='col-']:last-child {
    padding-left:0;
  }


  /* only for column content visible */
  .col-md-1>div {background-color:#ddd;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

 <div class="container-fluid">
    <div class="row no-gutter" >
        <div class="col-md-6"   style="background-color:#d9eaf2;color: #6666ccff;font-family: Roboto,Tahoma,Helvetica,sans-serif;font-size: 14px;margin-bottom: 6px;">
    </div>
  <div class="col-md-6"><img class="aligncenter size-full wp-image-240" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
  <img class="aligncenter size-full wp-image-247" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
  <img class="aligncenter size-full wp-image-246" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
  <img class="aligncenter size-full wp-image-245" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
  <img class="aligncenter size-full wp-image-244" src="https://via.placeholder.com/28" alt="" width="28" height="28" />
  <img class="aligncenter size-full wp-image-242" src="https://via.placeholder.com/28" alt="" width="28" height="28" /></div>
    </div>
  </div>

Answer 2

您可以使用bootstrap align class align-middle 来对齐它。

喜欢：

<div class="col-md-1 align-middle"><img class="aligncenter size-full wp-image-240" src="#iconfinder_facebook_circle_color_107175-e1547916268272.png" alt="" width="28" height="28" /></div>