2016-02-20 2 views
1

Может кто-нибудь помочь мне в удалении лишнего пробела (колонки) в самой правой части моего сайта. Я разделил строку на столбцах wt-col-sm-3, wt-col-sm-6, wt-col-sm-3, но есть дополнительное пространство с белым столбцом, которое я хочу удалить. Я пробовал много вариантов и менял css. Но ничего не работает.Bootstrap 3 grid

<div id="slider_row"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <!-- Module Megamenu--> 
 
      <div id="wt-menu-ver-left" class="wt-menu-ver-left wt-col-sm-3 wt-col-md-2"> 
 
       <div class="title-menu-mobile category-title"><span>Category</span></div> 
 
       <div class="category-left" style="display: block;"> 
 
        <ul class="menu-content"> 
 
         <li class="level-1 parent"> 
 
          <!-- All categories listings mobiles and accessories,tablets,laptops,Desktops &Monitors,Laptop Battery & charger --> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
      <!-- /Module Megamenu --><!-- Module HomeSlider --> 
 
      <div id="slider-wrapper" class="wt-col-md-6 wt-col-sm-6"> 
 
       <div id="layerslider" style="visibility: visible; width: 538px; height: 395.588px;" class="ls-container ls-v5"> 
 
        <!--Mac book advertisement contents --> 
 
       </div> 
 
      </div> 
 
      <!-- /Module HomeSlider --><!-- Static Block module --> 
 
      <div id="slider-wrapper" class="wt-col-md-3 wt-col-sm-3"> 
 
       <p><img src="http://www.m.com/img/cms/freedel.jpg" class="img-responsive" alt="Free Delivery" width="200" height="174"></p> 
 
       <p><img src="http://www.m.com/img/cms/GENUINE PR.png" class="img-responsive" alt="100% Genuine" width="200" height="144"></p> 
 
       <p><img src="http://www.m.com/img/cms/pay1.png" class="img-responsive" alt="Payment Methods" width="200" height="157"></p> 
 
      </div> 
 
      <!-- /Static block module --> 
 
     </div> 
 
    </div> 
 
</div>

+0

Для устройств 'medium' у вас есть' 'wt-col-md-2' +' wt-col-md-6' + 'wt-col-md-3', что равно 11, а bootstrap использует 12 сетку раскладка. – Vucko

+0

Вы можете загрузить свой код переднего конца в jsfiddle или plunker? – johannesMatevosyan

+0

thnxx за помощью – Jesy

ответ

0

A. Вы не распределены столбцы надлежащим образом, так как у вас есть wt-col-md-2 + wt-col-md-6 + wt-col-md-3 для средних устройств, которая дает 11 в то время как начальной загрузки на основе системы компоновки 12 сетки. Таким образом, вы можете попробовать сделать так:

wt-col-md-2 + wt-col-md-7 + wt-col-md-3

или

wt-col-md-2 + wt-col-md-8 + wt-col-md-2

, чтобы заполнить всю ширину строки.

B. Я заметил, что ширина ваших столбцов в файле wt-grid.scss была рассчитана неправильно, потому что два столбца, wt-col-md-2 имеет ширину 19.14529%, и если вы умножаете его на 6, чтобы получить 12 макетов столбца у вас будет 114,87% вместо необходимых 100%. Более того, я не нашел ширины для классов wt-col-md-6 и wt-col-md-7, они отсутствовали.

http://screencast.com/t/D9elhv9n

http://screencast.com/t/shwRKflSUq6

Good Luck!

+0

thnx за помощью. – Jesy

+0

Добро пожаловать! – johannesMatevosyan