Можно ли в bootstrap классам .col-* задать margin отступ?
все понятно сетка в boostrap явряется 12-ти
все хорошо она под весь width экрана идет, но если стоит задача сделать margin-right отступ между ними(то естественно это превысит 100% width уже и сетка уже не будет в один ряд), может есть какой-то такой класс о котором я не знаю?;D который бы отступы сделал и пересчитал width... что он так-же был в одну колонку но с margin-right... П.С border не предлагать, он к сожалению не подходит для данной задачки... такая задача верстки(белое как-бы надо margin между ними, не border) DEMO: http://jsfiddle.net/DF6FR/ надо чтоб они не были склеены, а был margin отступ между ними, главный вопрос у bootstrap есть какой-то класс для этого?;) |
Иногда задачи требуют очевидных решений… Сверстай таблицей, ё!
Еще можно сверстать колонки гридом, а отступы сделать вложенными элементами. Бутстрап нужен для прототипирования простеньких интерфейсов, это не значит, что в случае, когда тебе нужно сделать что-то более сложное, ты должен пытаться делать это средствами бутстрапа. |
cha0s,
Вы хотите использовать сетку, но вместе с тем сломать эту сетку своими маржинами? Единственное, что из бутстраповских классов может быть использовано - это маржины, кратные единице сетки - .col-md-offset-* |
ВЕТЕРАН сделал не много так
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% красного, один слева, другой справа?:)))) |
Цитата:
|
1) вообщем смотри у boostrap'a .col-md в сумме 12-ти дает full width, я использовал только 11(получил отступ в 8.3333%) то есть не полный размер, на этот отступ я раскидал margin-right в сумме они будут эти 8.3333... то есть теперь я получил полную таблицу на весь экран но уже с margin, вроде-бы канает? у меня в таблице первый левый куб имеет фиксированную величину, и длинный квадрат тоже, при растягивание экрана меняются margin так как они заданы в %, но фиксированная высота естественно нет, как сделать так чтоб оба этих фиксированных больших элемента подстраивались тоже под это и были бы на одной линии.
2) Можно ли данную задачу как-то реализовать без помощи margin, а например border(правда с трудом сам верю - но может есть какая магия) |
cha0s,
думал, что дело в отсутствии точек. Оказалось, что нет. Я решительно не понимаю, как элемент может одновременно иметь фиксированные размеры и подстраиваться. |
Я решительно не понимаю, как элемент может одновременно иметь фиксированные размеры и подстраиваться.
я же пишу "но фиксированная высота естественно нет" :) вообщем, когда будешь менять размер экрана увидишь что они бывает не все на одной линии, это из-за фиксированной высоты стоящей у некоторых div'ov, как сделать так чтоб они подгонялись и все были одинаково по линии некто не уходил не выше и не ниже. и что по 2-ому вопросу?;) |
cha0s,
ну, так не делайте фиксированную высоту. Делайте ее для левой колонки 100% от родителя в десктопном лайауте. |
спасиб, но вот с этим нужна помощь, у меня почему-то сразу пропадает 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% высота) |
Часовой пояс GMT +3, время: 02:35. |