【问题标题】:removing space between blocks删除块之间的空间
【发布时间】:2019-06-13 22:29:09
【问题描述】:

我用图像做了一些块,我想把它们放在一行里面,并在它们之间留出一些空间。 我希望这是水平的和更少的内部空间。 我想删除块之间的空间。

 /* 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;}
<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;">i expect this to be horizontal and less inner space.placing it above head in wordpress theme just after head
    </div>
  <div class="col-md-1 align-middle"><img class="aligncenter size-full wp-image-2940" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1 align-middle"><img class="aligncenter size-full wp-image-2947" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2946" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2945" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2944" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
<div class="col-md-1"><img class="aligncenter size-full wp-image-2942" src="https://cdn0.iconfinder.com/data/icons/Social_Network_Icons_gloss/350/Facebook-px.png" alt="" width="28" height="28" /></div>
    </div>
  </div>

【问题讨论】:

    标签: html css wordpress twitter-bootstrap


    【解决方案1】:

    我不确定我是否理解您的问题,但也许您只需将带有 facebook 徽标的 div 包装在另一个 div 中,然后添加 display:flex;

    检查这个例子,如果它回答了你的问题,请告诉我:)

    https://codepen.io/mdubus/pen/NeQOKe

    【讨论】:

    • 好的,然后添加一个` display: flex; justify-content: flex-end;` 到你添加的 div :)
    • 很好,它工作得很好,但创造了相等的空间结合到上面的左检查站点
    • 我不明白你想达到什么目的。您能否发布您参加的结果的图片?那我就更能帮你了
    • 请在prntscr.com/m9lcrj查看图片并检查 jaipur.onlinewebshop.net
    • 所以你想删除左边的空间,并将你的标志 facebook 对齐到你的块的左边?如果是这样,请将 justify-content: flex-end; 更改为 justify-content: start; 并且不要忘记将 class="col-md-6" 添加到您的 div ;) 如果这不是问题,请详细说明您想要实现的目标:)
    猜你喜欢
    • 2021-08-10
    • 2020-11-19
    • 2012-09-25
    • 2013-08-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-04
    • 2019-10-10
    相关资源
    最近更新 更多