23.07.2014, 00:24
|
Кандидат Javascript-наук
|
|
Регистрация: 21.10.2013
Сообщений: 125
|
|
Можно ли в bootstrap классам .col-* задать margin отступ?
все понятно сетка в boostrap явряется 12-ти
все хорошо она под весь width экрана идет, но если стоит задача сделать margin-right отступ между ними(то естественно это превысит 100% width уже и сетка уже не будет в один ряд), может есть какой-то такой класс о котором я не знаю?;D который бы отступы сделал и пересчитал width... что он так-же был в одну колонку но с margin-right...
П.С border не предлагать, он к сожалению не подходит для данной задачки...
такая задача верстки(белое как-бы надо margin между ними, не border) тобишь такую я собрал сетку, но без margin.
DEMO: http://jsfiddle.net/DF6FR/
надо чтоб они не были склеены, а был margin отступ между ними, главный вопрос у bootstrap есть какой-то класс для этого?
|
|
23.07.2014, 11:59
|
|
Профессор
|
|
Регистрация: 19.01.2010
Сообщений: 354
|
|
Иногда задачи требуют очевидных решений… Сверстай таблицей, ё!
Еще можно сверстать колонки гридом, а отступы сделать вложенными элементами.
Бутстрап нужен для прототипирования простеньких интерфейсов, это не значит, что в случае, когда тебе нужно сделать что-то более сложное, ты должен пытаться делать это средствами бутстрапа.
Последний раз редактировалось ixth, 23.07.2014 в 12:12.
|
|
23.07.2014, 12:39
|
|
Профессор
|
|
Регистрация: 23.06.2011
Сообщений: 1,165
|
|
cha0s,
Вы хотите использовать сетку, но вместе с тем сломать эту сетку своими маржинами? Единственное, что из бутстраповских классов может быть использовано - это маржины, кратные единице сетки - .col-md-offset-*
|
|
23.07.2014, 21:43
|
Кандидат Javascript-наук
|
|
Регистрация: 21.10.2013
Сообщений: 125
|
|
ВЕТЕРАН сделал не много так
http://jsfiddle.net/DF6FR/3/
то есть у меня в сетке используется .col-md суммой всего 11, а одно расстояние я раскидал на margin равной этой % величине, на мелком разрешение не столь важно пока что они складываются не особо идеально, вопрос в том что левый блог(красный) и увеличенный квадрат у меня имеют фиксированный height и при изменения экрана мои margin которые в % естественно меняются, а фиксированная высота само собой нет, не подскажешь что тут можно предпринять чтоб этот? чтоб все они были одинаковые по отступам и снизу на одной линии, у меня съезжает не много ;/ да и правая колонка должна быть без разрывов одной полосой)) левая получилась такая, а вот правая что-то не выходит, делаю одним блогом(фиксированной длиной) и сразу как-то все ломается,
и вопрос такое вообще можно получить без marginov
понятно что у левого и правого я могу задать border-right:10px solid white и у правого border-left..... и т.д все круто, но у кубиков уже есть красный border, возможно ли что-то нахимичить так чтоб выглядело как на картинки но без margin? наверное нет;D borderu случайно сразу 2 цвета задать нельзя? 50% белого, и 50% красного, один слева, другой справа? )))
Последний раз редактировалось cha0s, 23.07.2014 в 21:50.
|
|
23.07.2014, 21:51
|
|
Профессор
|
|
Регистрация: 23.06.2011
Сообщений: 1,165
|
|
Сообщение от cha0s
|
то есть у меня в сетке используется .col-md суммой всего 11, а одно расстояние я раскидал на margin равной этой % величине, на мелком разрешение не столь важно пока что они складываются не особо идеально, вопрос в том что левый блог(красный) и увеличенный квадрат у меня имеют фиксированный height и при изменения экрана мои margin которые в % естественно меняются, а фиксированная высота само собой нет, не подскажешь что тут можно предпринять чтоб этот? чтоб все они были одинаковые по отступам и снизу на одной линии, у меня съезжает не много ;/ да и правая колонка должна быть без разрывов одной полосой)) левая получилась такая, а вот правая что-то не выходит, делаю одним блогом(фиксированной длиной) и сразу как-то все ломается
|
У Вас на клавиатуре есть кнопка с точкой? Прочитал 2 раза, ничего не понял.
|
|
23.07.2014, 21:59
|
Кандидат Javascript-наук
|
|
Регистрация: 21.10.2013
Сообщений: 125
|
|
1) вообщем смотри у boostrap'a .col-md в сумме 12-ти дает full width, я использовал только 11(получил отступ в 8.3333%) то есть не полный размер, на этот отступ я раскидал margin-right в сумме они будут эти 8.3333... то есть теперь я получил полную таблицу на весь экран но уже с margin, вроде-бы канает? у меня в таблице первый левый куб имеет фиксированную величину, и длинный квадрат тоже, при растягивание экрана меняются margin так как они заданы в %, но фиксированная высота естественно нет, как сделать так чтоб оба этих фиксированных больших элемента подстраивались тоже под это и были бы на одной линии.
2) Можно ли данную задачу как-то реализовать без помощи margin, а например border(правда с трудом сам верю - но может есть какая магия)
|
|
23.07.2014, 22:17
|
|
Профессор
|
|
Регистрация: 23.06.2011
Сообщений: 1,165
|
|
cha0s,
думал, что дело в отсутствии точек. Оказалось, что нет. Я решительно не понимаю, как элемент может одновременно иметь фиксированные размеры и подстраиваться.
|
|
23.07.2014, 22:26
|
Кандидат Javascript-наук
|
|
Регистрация: 21.10.2013
Сообщений: 125
|
|
Я решительно не понимаю, как элемент может одновременно иметь фиксированные размеры и подстраиваться.
я же пишу "но фиксированная высота естественно нет"
вообщем, когда будешь менять размер экрана увидишь что они бывает не все на одной линии, это из-за фиксированной высоты стоящей у некоторых div'ov, как сделать так чтоб они подгонялись и все были одинаково по линии некто не уходил не выше и не ниже.
и что по 2-ому вопросу?
|
|
23.07.2014, 22:33
|
|
Профессор
|
|
Регистрация: 23.06.2011
Сообщений: 1,165
|
|
cha0s,
ну, так не делайте фиксированную высоту. Делайте ее для левой колонки 100% от родителя в десктопном лайауте.
|
|
23.07.2014, 22:55
|
Кандидат Javascript-наук
|
|
Регистрация: 21.10.2013
Сообщений: 125
|
|
спасиб, но вот с этим нужна помощь, у меня почему-то сразу пропадает div как я ему ставлю height: в %,
<div class="row" style="margin:0; min-height:546px;">
<div class="col-md-4" style="background:red; height:100%;"></div>
</div>
что не так? главный контейнер у меня фиксированно имеет 546px, а внутри, имеет min-height:100% , то есть он должен быть высотой тоже 546px (то бишь 100% высота)
|
|
|
|