3

Есть бутстраповская сетка с 3 колонками, элементами которых выступают спрайтовые изображения. Проблема в том, что при определенных разрешениях картинки (разного размера) наезжают друг на друга - демонстрация в фидл. Если классу logo назначить стиль width:100%;, то это тоже проблему не решит, т.к. они будут зарезаться - что посоветуете?

.logo {
    background-image: url(http://www.mugeno.com/_ld/28/60107527.jpg);
    background-repeat: no-repeat;
    height: 90px;
    display: inline-block;
}
.logo-1 {
    background-position: 0 0;
    width: 200px;
}
.logo-2 {
    background-position: -5px -179px;
    width: 208px;
}
.logo-3 {
    background-position: 0 0;
    width: 300px;
}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">

		<div class="col-sm-4">
			<a class="logo logo-1" href="http://nawinia.com/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-2" href="http://pharmtechnology.info/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-3" href="#" target="_blank" rel="nofollow"></a>
		</div>
		<div class="col-sm-4">
			<a class="logo logo-1" href="http://nawinia.com/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-2" href="http://pharmtechnology.info/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-3" href="#" target="_blank" rel="nofollow"></a>
		</div>
		<div class="col-sm-4">
			<a class="logo logo-1" href="http://nawinia.com/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-2" href="http://pharmtechnology.info/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-3" href="#" target="_blank" rel="nofollow"></a>
		</div>
		</div>

1 ответ 1

3

Ширина третьей картинки - 308px. При ширине экрана от 768 до 991px контейнер занимает 750px. Поэтому при разбиении на три колонки картинка оказывается слишком широкой, чтобы поместиться в свою колонку.

Чтобы картинка помещалась, контейнеру нужно не менее 3 x 308px = 924px. Поэтому вариант решения - сохранять одноколоночный макет до следующего брейкпоинта и делать три колонки, начиная с ширины экрана в 992px.

Для этого достаточно заменить все col-sm-4 на col-md-4.

https://jsfiddle.net/glebkema/ny4na71e/

.logo {
  background-image: url(http://www.mugeno.com/_ld/28/60107527.jpg);
  background-repeat: no-repeat;
  height: 90px;
  display: inline-block;
}
.logo-1 {
  background-position: 0 0;
  width: 200px;
}
.logo-2 {
  background-position: -5px -179px;
  width: 208px;
}
.logo-3 {
  background-position: 0 0;
  width: 300px;
}
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <a class="logo logo-1" href="http://nawinia.com/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-2" href="http://pharmtechnology.info/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-3" href="#" target="_blank" rel="nofollow"></a>
    </div>
    <div class="col-md-4">
      <a class="logo logo-1" href="http://nawinia.com/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-2" href="http://pharmtechnology.info/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-3" href="#" target="_blank" rel="nofollow"></a>
    </div>
    <div class="col-md-4">
      <a class="logo logo-1" href="http://nawinia.com/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-2" href="http://pharmtechnology.info/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-3" href="#" target="_blank" rel="nofollow"></a>
    </div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.