Как удалить неприглядные прокладки вокруг разборных колонок/аккордеона

У меня есть 6 столбцов в одной строке, которые являются частью группы панелей. Когда один столбец открывается, закрывается другой ранее открытый столбец. Тем не менее, макет имеет эти неприглядные прокладки или границы вокруг, и столбцы также отображаются вне сетки. Я пытался искать решения, но не повезло.Как удалить неприглядные прокладки вокруг разборных колонок/аккордеона

Вот выход из проблемы:

Что мне нужно иметь:

Вот моя проблема Код:

  <div class="container"> 
      <div class="row"> 
       <div class="panel-group" id="Heyaccordion"> 
       <div class="panel panel-default col-sm-2"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a href="#collapseTopOneMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-piggy-bank"></span>&#160;&#160;&#160;PC Inventory<br/> </a> </h4> 
        </div> 
        <div class="panel-collapse collapse" id="collapseTopOneMore"> 
         <div class="panel-body"> 
          <span class="glyphicon glyphicon-ok"></span> 
          <a href="#">&#160;&#160;&#160;Somewhere </a> </div> 
        </div> 
       </div> 
       <div class="panel panel-default col-sm-2"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a href="#collapseTopTwoMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4> 
        </div> 
        <div class="panel-collapse collapse" id="collapseTopTwoMore"> 
         <div class="panel-body"> 
          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google </a> </div> 
        </div> 
       </div> 
       <div class="panel panel-default col-lg-2"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a href="#collapseTopThreeMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4> 
        </div> 
        <div class="panel-collapse collapse" id="collapseTopThreeMore"> 
         <div class="panel-body"> 
          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google </a> </div> 
        </div> 
       </div> 
       <div class="panel panel-default col-lg-2"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a href="#collapseTopFourMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4> 
        </div> 
        <div class="panel-collapse collapse" id="collapseTopFourMore"> 
         <div class="panel-body"> 
          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> google </a> </div> 
        </div> 
       </div> 
       <div class="panel panel-default col-lg-2"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a href="#collapseTopFiveMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4> 
        </div> 
        <div class="panel-collapse collapse" id="collapseTopFiveMore"> 
         <div class="panel-body"> 
          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google </a> </div> 
        </div> 
       </div> 
       <div class="panel panel-default col-lg-2"> 
        <div class="panel-heading"> 
         <h4 class="panel-title"> 
          <a href="#collapseTopSixMore" data-toggle="collapse" data-parent="#Heyaccordion"><span class="glyphicon glyphicon-bullhorn"></span>&#160;&#160;&#160;Incomings<br/> </a> </h4> 
        </div> 
        <div class="panel-collapse collapse" id="collapseTopSixMore"> 
         <div class="panel-body"> 
          <span class="glyphicon glyphicon-time"></span><a href="http://www.google.com/"> Google</a> </div> 
        </div> 
       </div> 
       </div> 
      </div> 
     </div>

источник

2016-09-28 Jinnie

если добавить следующее будет решить проблему, показанную в изображениях:

#Heyaccordion .panel { 
    margin-top: 5px; 
    padding: 0; 
    margin-left: 10px; 
    margin-right: 10px; 
    max-width: 164px; 
}

также есть причина, вы подали в суд .col-sm-2 на первых двух панелей?

источник

2016-09-28 19:53:58

Это исправлено! Какое облегчение. Большое спасибо. – Jinnie

О, я этого не осознавал! Исправит это. У меня нет особых причин использовать sm- или lg-. Я был чисто основан на окончательном выходе. Этот код будет отображаться только на мониторе. – Jinnie

С бутстрапом он работает на раскладке в 12 столбцов, поэтому должен работать над этим принципом. –

Добавить класс для элемента, который вы wi sh, чтобы удалить прокладку из и затем 0 из прокладки в этом классе с помощью CSS.

источник

2016-09-28 19:42:52 fauverism

Не уверен, что вы можете увидеть мое первое изображение (проблематичное). Он имеет эту затененную область для текста (которую я хочу сохранить) и эту белую часть вокруг. Все остальные коробки были отброшены. Как превратить эти квадратики в свое второе изображение? Не могли бы вы более подробно рассказать о своем решении? Я начинающий. Благодарю. – Jinnie

Как удалить неприглядные прокладки вокруг разборных колонок/аккордеона

ответ

Смежные вопросы