2016-06-13 2 views
0

У меня есть нежелательная прокладка слева от изображений (см. Код ниже). Я попытался изменить, удалить или заменить каждую строку кода в CSS .wrapper-shadow - не повезло. Эта ошибка появляется в Firefox, Chrome и Explorer. Интересно, что у меня очень похожий код для планшетных и мобильных страниц для одного и того же сайта, у которых нет ошибки. Я попытался подставить планшет CSS и HTML для кода рабочего стола, и в любом случае возникла ошибка. See attached image of the problem.Нежелательное заполнение левого края изображений с помощью обертки CSS

Также интересно: планшеты и мобильные сайты (которые отображаются правильно) имеют более узкие левые поля, чем рабочий стол. See attached image of margin difference. Я просматривал каждую строку моего собственного загрузочного CSS-кода, чтобы узнать, могу ли я найти разницу между таблицами стилей рабочего стола и планшета - опять же, не повезло. Любая помощь будет оценена. Благодарю. Zaffer

.wrapper_shadow{ 
 
\t max-width: 765px; 
 
\t background-color: #9ebade; 
 
\t border: thin solid #758fa9; 
 
\t -webkit-box-shadow: 2px 2px 5px 2px #758fa9; 
 
\t box-shadow: 2px 2px 5px 2px #758fa9; 
 
\t margin-bottom: 15px; 
 
\t padding-left: 0px; \t 
 
}
<div class="container-fluid"> 
 
    <div class="pageHeaderText">Virtual performance art made with Unity3D game creation software</div> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <div class="wrapper_shadow center-block"> 
 
     <img src="images/ColorCubed_765.jpg" class="img-responsive center-block" alt="ColorCubed"/> 
 
     </div>

+0

Что в 'IMG-отзывчивым центр-block' правила не/выглядеть? – LGSon

+0

@LGSon http://getbootstrap.com/css/#images-responsive – hjpotter92

ответ

0

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

У меня была строка: «padding-left: 5px;» в стиле * {} моего родителя bootstrap.css, который каскадировался вниз и вызывая ошибку в моих styles.css. (См. Код ниже). Тот факт, что ошибка появлялась только в настольной версии моего сайта, а не на планшете или мобильном телефоне, у которых есть свои таблицы стилей, была ключом. Я думаю, что мораль истории всегда должна проверять ваши каскады. Благодарю. Zaffer

* { 
 
\t -webkit-box-sizing: border-box; 
 
\t -moz-box-sizing: border-box; 
 
\t box-sizing: border-box; 
 
\t padding-left: 5px; 
 
}

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