Бутсрап и список

[Zverushka]

В самом конце страницы есть список из 6ти пунктов.

Ul я сделала как row, а пункты .col-sm-4 -  на большом экране смотрится нормальн, но при сужении все ломается (мало того, что элементы списка криво выравниваются, так еще и внутри них текст на новую строку перескакивает, хотя там стоит 30 и 60% и border-box - что не так и как нужно? 

http://zverushka.zz.mu/edu9/

Edited December 23, 2013 by Zverushka

[Светлана Г.]

При ширине, когда так ломается - указанные стили просто не подключаются к li.

Edited December 23, 2013 by Светлана Г.

[Zverushka]

Убрала inline-block для li - но лучше не стало. К том же блоки получаются float, а мне нужны inline-block - иначе некоторые из них начинают ускакивать восвояси - что же делать?

[wwt]

Документацию читали? .col-sm-* сетка для Small devices то есть >=768 при этом max-width равен 750px, при этом максимальная ширина одной колонки 60px . В 3+ бутстрапе можно использовать сразу все классы для всех диапазонов разрешений:

<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4"></div>

всего 12 колонок, а у вас должно быть 3 колонки и вы верно выбрали классы с  4, но только под одну размерность.

ЗЫ а вообще изначально неверно использовать row и col-*-* для списков. Это реализация сетки! А не структуризация меню.

Edited December 23, 2013 by wwt

[Zverushka]

Документацию читали? .col-sm-* сетка для Small devices то есть >=768 при этом max-width равен 750px,

да

при этом максимальная ширина одной колонки 60px

да

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

да, а если указываешь меньший диапазон - на более высокие распротраняется аналогичный стиль (с большими диапазонами кстати все ок - проблем нет, проблема с xs диапазоном)

всего 12 колонок, а у вас должно быть 3 колонки и вы верно выбрали классы с  4, но только под одну размерность.

 

Вот этот момент не поняла. Я знаю, что каждая строка должна быть обернута в .row, но я этого не могу сделать из-за списка (нельзя li оборачивать div'ом) - как же мне добиться нужного эффекта? Что изменить?

[Anna Zharova]

А вы не пробавили все это загнать не в UL а просто дивы использовать. Что бы пр сужении все выстраивалось влево и друг под другом

[swandev]

 

Документацию читали? .col-sm-* сетка для Small devices то есть >=768 при этом max-width равен 750px,

да

 

 

при этом максимальная ширина одной колонки 60px

да

 

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

да, а если указываешь меньший диапазон - на более высокие распротраняется аналогичный стиль (с большими диапазонами кстати все ок - проблем нет, проблема с xs диапазоном)

 

 

всего 12 колонок, а у вас должно быть 3 колонки и вы верно выбрали классы с  4, но только под одну размерность.

 

Вот этот момент не поняла. Я знаю, что каждая строка должна быть обернута в .row, но я этого не могу сделать из-за списка (нельзя li оборачивать div'ом) - как же мне добиться нужного эффекта? Что изменить?

 

 

Если ставить просто col-sm-4,  то независимо от разрешения каждый li будет иметь ширину 33.33333333333333%

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

 

<li class="col-sm-4 col-xs-12"><li>   вот так все нормально

[wwt]

Уберите список вообще он вам не нужен. Используйте два row с 3 колонками.

По поводу новой сетки очень неплохо с примерами есть в документации http://getbootstrap.com/css/#grid . Прикол в том что для мобильных девайсов ширина определяется в процентах. Тоесть если у вас ширина монитора меньше 768px то ваши колонки начинают перескакивать на новую строку. Если прописать xs классы колонки будут иметь ращмер в процентах, но немного меняется зависимость и вот в примере "Mobile and desktop" это видно там колонки имеют вид:

.col-xs-12 .col-md-8          |                .col-xs-6 .col-md-4.col-xs-6 .col-md-4              |              .col-xs-6 .col-md-4           |          .col-xs-6 .col-md-4.col-xs-6                                                 |                                             .col-xs-6

Ширина xs хитрая.

[swandev]

<li class="col-sm-4 col-xs-6"><li>

или так, но примерно <555px через медиа запросы увеличить ширину li до 100%

[wwt]

Вообще они очень намудрили с новой сеткой, всё в процентах, нуна кучу классов прописывать чуть что. возможно вам проще использовать номер 12 в колонке а внутрь положить свой див и фиксированной шириной+выравнивание по центру и не парить моск.

Edited December 23, 2013 by wwt

[Zverushka]

Если ставить просто col-sm-4,  то независимо от разрешения каждый li будет иметь ширину 33.33333333333333% Чтобы такого не было нужно добавлять также классы для других разрешений  

•  
•   вот так все нормально

   

Вообще-то это одинаковвые записи .col-sm-4 и .col-sm-4.col-xs-12

http://jsfiddle.net/Zverushka/ESU55/4/

[Zverushka]

Вот у меня кое-что получилось через извращение. Ul задала list-inline row

Блока col-xs-4 - и отменила им обекание в стилях, чтобы они были инлайн-блоками.

http://zverushka.zz.mu/edu10/

Две проблемы - как сделать, чтобы текст был по центру относительно картинки, а картинка всегда сверху? не получается трюк с inline-block провернуть.

2я - почему текст перескакивает на новую строку?

[swandev]

Вообще не вижу никакой проблемы. Сделал как написал выше, и все хорошо перестраивается, или нужно чтобы всегда 3 ряда было? Только зачем? Для маленьких экранов в основном всегда все перестраивается в одну колонку.

 

display: table для ul, 

display: table-cell ;  vertical-align: middle для li  

так можно выровнять текст.

 

 

Текст на другую строку переходит, потому что не хватает места в первой строке)

Edited December 23, 2013 by ALEEX SWN

[Zverushka]

Почему ему (p) не хватает, если ему задано 60% ширины родителя, а картинке 30%?...

А table-cell тут же сломает сетку, разве нет? да и картинки тоже будут посередине, а надо ведь, чтобы наверху были. Их и сейчас несложно поцентру разместить, если и img и p задать va: middle;

Edited December 23, 2013 by Zverushka

[swandev]

Почему ему (p) не хватает, если ему задано 60% ширины родителя, а картинке 30%?...

А table-cell тут же сломает сетку, разве нет? да и картинки тоже будут посередине, а надо ведь, чтобы наверху были. Их и сейчас несложно поцентру разместить, если и img и p задать va: middle;

 

 

Потому что  

 

 

border-box Свойства width и height включают в себя значения полей и границ, но не отступов (margin).

До тех пор пока те 24px занимают 10% которые остались  - текст никуда не уходит. Как только 24px> 10% тест уходит на вторую строку

Edited December 23, 2013 by ALEEX SWN

[Zverushka]

Потому что  

И правда, я совсем его из виду упускала. 

Ну теперь остался вопрос лишь как сделать, чтобы картинка была прижата к верху, а текст по центру ячейки...

Edited December 23, 2013 by Zverushka

[npofopr]

а текст по центру ячейки.

таблица.

Делайте этот нижний блок через display: table;

При 768px или скольки там вам надо, делайте в display: block;

 

На кой ляд там вообще бутстрап?

[Zverushka]

На кой ляд там вообще бутстрап?

Тренируюсь. Часто лендинги хотят адаптивными.

 

 

Делайте этот нижний блок через display: table;

Ничего не поняла. Можно пример на jsfiddle? Вот заготовка для примера http://jsfiddle.net/Zverushka/f7rEY/

Edited December 23, 2013 by Zverushka

[klierik]

1) может все таки не надо пихать классы сетки в разметку, а использовать для этого less?

 

2) По теме.

Для того что бы текст не соскакивал вниз, в данном случае нужен ws:nw для ".list-adv li", но при этом его отменить для ".list-adv p"

Далее, у тебя ломается строка и создается "лесенка" потому что у тебя высота каждого блока разная. Это вполне предсказуемо и нормально, в данной ситуации.

Решить ситуацию можем добавив стили:

 

.list-adv li {display: inline-block;float: none;vertical-align: top;white-space: nowrap;}

 

Я не знаю зачем тебе сдался вообще Бутстрап в данном проекте? Ради прикола что ли? Подключать его в столь мелкий проект, и при этом использовать не правильно... Ох горенька-горенька...

[cyklop77]

 

 

Я не знаю зачем тебе сдался вообще Бутстрап в данном проекте? Ради прикола что ли? Подключать его в столь мелкий проект, и при этом использовать не правильно... Ох горенька-горенька...

заказчики иногда чудят. ставят непременным условием использование последней версии бутстрапа... хотят быть на пике технологий наверное )

здесь скорее всего как раз этот случай

[klierik]

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

 

у тебя такое было? тебя заставляли использовать технологии которые нафиг не надо в данном конкретном проекте?

 

я своих заказчиков "продвигаю" использовать те или иные технологии, в рамках конкретного проекта, и подтверждаю свои рекомендации списком положительных и отрицательных фактором. тем более не будем забывать что использование любой технологии поверх стандарта html/css приводить к удорожанию разработки. даже элементароное внедрение и настройка jQ плагинов стоит денего и времени, не говоря про самопис.

 

если заказчик не компетентен в предметной области, это не значит что надо его слушать, а наоборот -- надо рассказать, как добиться лучшего результата, за меньшее время и за меньшие для него деньги. Ибо деньги в 99% случаев самый важный фактор.

[Светлана Г.]

33.33333333333333%

Немного не в тему... А откуда берутся такие значения? Часто смотрю чужую верстку и вижу нечто подобное..

Edited December 24, 2013 by Светлана Г.

[Radiocity]

Делением 100% на 3. Обычно для сетки

[Светлана Г.]

Делением 100% на 3. Обычно для сетки

Но это вручную прописывается? Меня как-то смущает эта точность.

Edited December 24, 2013 by Светлана Г.

[wwt]

 

Делением 100% на 3. Обычно для сетки

Но это вручную прописывается? Меня как-то смущает эта точность.

 

для деления есть калькулятор, а прописывается конечно вручную ))

 

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

.column,.column-10,.column-20,.column-30,.column-40,.column-50,.column-60,.column-70,.column-80,.column-90,.column-100 {    margin: 0.9%;    float: left;    display: block;    padding: 9px;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;    box-sizing: border-box;    border: solid 1px transparent;    background-color: transparent;    min-width: 50px;}.column-10 {width: 9.311111111111111%;}.column-20 {width: 20.42222222222222%;}.column-30 {width: 31.53333333333333%;}.column-40 {width: 42.64444444444444%;}.column-50 {width: 48.2%;}.column-60 {width: 53.75555555555556%;}.column-70 {width: 64.86666666666667%;}.column-80 {width: 75.97777777777778%;}.column-90 {width: 87.08888888888889%;}.column-100 {width: 98.2%;}

Вообще не ровные циферки из-за процентного margin для колонок

[swandev]

 

Делением 100% на 3. Обычно для сетки

Но это вручную прописывается? Меня как-то смущает эта точность.

 

 

Да вручную. Но это за нас уже сделали разработчики bootstrap