Bootstrap удаление внутреннего интервала для отзывчивой жидкости - PullRequest
Новая
       5

Bootstrap удаление внутреннего интервала для отзывчивой жидкости

0 голосов
/ 20 января 2019

Я пытаюсь разместить значки социальных сетей в общей сложности 6 с плавающей точкой в ​​правом верхнем углу в моем слове магазина. Этот контейнер я помещаю над секцией head с загрузочным изображением container.check, прикрепленным, так как пространство между столбцами слишком велико. Любые предложения с или без начальной загрузки.

Пробовал ниже 

  <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

актуальная проблема:

enter image description here

Ответы [ 2 ]

0 голосов
/ 20 января 2019

Проблема в том, что вы добавили каждое изображение в отдельный столбец, и по мере роста страницы каждый столбец будет иметь одинаковую ширину, намного большую, чем изображения.

Вы должны поместить все изображения в один столбец и увеличить его размер до 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>
0 голосов
/ 20 января 2019

Вы можете использовать класс выравнивания начальной загрузки 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>
...