Адаптивная верстка. Правильно ли?

Question

[Ciscoridze]

В верстке особо не разбираюсь, но хочу разобраться.
Мне надо, чтобы таблицы с картинкой внутри div на всех мониторах выводились одинаково, правильно ли я делаю?

<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1" style="height: 603px;">
  <div class="info-box info-box2">
     <div class="img">
        <img src="images/uploads/test/arrow.png" style="width: 70%;">
     </div>
  </div><!-- /.info-box -->
</div>

Есть какой-нибудь маст-рид гайд по этой теме? Годные уроки может быть.

Comments

[WhiteSama]

читай документацию по бутстрапу. там ничего сложного.

[devstudent]

так проверьте на разных разрешениях и увидите так ли отображается или нет как как надо и поймет правильно или нет

[Ciscoridze]

devstudent: col-lg-1 col-md-1 col-sm-1 col-xs-1 вот это смущает. Я думал есть более элегантное решение, если я хочу одинаковое отображение на всех устройствах.

[devstudent]

Элегантность? вы видели разметку например магазина на cms, там по 10 классов у элемента
если убрать здесь классы придется прописывать все в медиазапросах, тогда там будет неэлегантно, так что забейте ))) пусть будет так

Answer 1

[Дмитрий Крымцев]

Вот тут подробно всё объясняется и показывается

webformyself.com/minikurs/bootstrap/index-subscrib...

Answer 2

[Александр Ружевич]

col-lg-1 col-md-1 col-sm-1 col-xs-1 вот это изначально неправильно, запись не имеет смысла, бутстрап работает таким образом что если вы задали к примеру

<div classs="col-sm-3">
</div>

то все что выше (т.е md и lg) будут col-md-3 и col-lg-3
а все что ниже (xs) станет col-xs-12
то есть задайте просто col-xs-1 и все, но это не имеет особого смысла так как скажем на телефоне шириной 320px дисплей поделится на 12 частей и рассмотреть что то будет сложно, можно попробовать к примеру

<div class="col-md-4 col-sm-3 col-xs-6">
content
</div>

если картинка находится внутри блока то дайте ей класс и присвойте значения

width:100%;
height:auto;

и она будет масштабировать под блок не теряя пропорций

Comments

[Ciscoridze]

Вот спасибо, прям тот ответ, что я хотел получить!

[Александр Ружевич]

Ciscoridze: пожалуйста, спрашивайте)

Answer 3

[Pretor DH]

Вот это не правильно:
style="height: 603px;"

Определи класс и задай высоту в нем.
Для картинки указывай ширину в арибуте, а не инлайн-стиле.

Comments

[Ciscoridze]

"Для картинки указывай ширину в арибуте, а не инлайн-стиле." - style="width: 70%;"> про это? Т.е. лучше в style.css это отразить, понятно.
А вот это меня волнует в первую очередь: class="col-lg-1 col-md-1 col-sm-1 col-xs-1" . Вот это верно я сделал?