Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Можно ли в bootstrap классам .col-* задать margin отступ? (https://javascript.ru/forum/xhtml-html-css/48947-mozhno-li-v-bootstrap-klassam-col-%2A-zadat-margin-otstup.html)

cha0s 23.07.2014 00:24

Можно ли в 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 есть какой-то класс для этого?;)

ixth 23.07.2014 11:59

Иногда задачи требуют очевидных решений… Сверстай таблицей, ё!

Еще можно сверстать колонки гридом, а отступы сделать вложенными элементами.

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

BETEPAH 23.07.2014 12:39

cha0s,
Вы хотите использовать сетку, но вместе с тем сломать эту сетку своими маржинами? Единственное, что из бутстраповских классов может быть использовано - это маржины, кратные единице сетки - .col-md-offset-*

cha0s 23.07.2014 21:43

ВЕТЕРАН сделал не много так

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% красного, один слева, другой справа?:))))

BETEPAH 23.07.2014 21:51

Цитата:

Сообщение от cha0s
то есть у меня в сетке используется .col-md суммой всего 11, а одно расстояние я раскидал на margin равной этой % величине, на мелком разрешение не столь важно пока что они складываются не особо идеально, вопрос в том что левый блог(красный) и увеличенный квадрат у меня имеют фиксированный height и при изменения экрана мои margin которые в % естественно меняются, а фиксированная высота само собой нет, не подскажешь что тут можно предпринять чтоб этот? чтоб все они были одинаковые по отступам и снизу на одной линии, у меня съезжает не много ;/ да и правая колонка должна быть без разрывов одной полосой)) левая получилась такая, а вот правая что-то не выходит, делаю одним блогом(фиксированной длиной) и сразу как-то все ломается

У Вас на клавиатуре есть кнопка с точкой? Прочитал 2 раза, ничего не понял.

cha0s 23.07.2014 21:59

1) вообщем смотри у boostrap'a .col-md в сумме 12-ти дает full width, я использовал только 11(получил отступ в 8.3333%) то есть не полный размер, на этот отступ я раскидал margin-right в сумме они будут эти 8.3333... то есть теперь я получил полную таблицу на весь экран но уже с margin, вроде-бы канает? у меня в таблице первый левый куб имеет фиксированную величину, и длинный квадрат тоже, при растягивание экрана меняются margin так как они заданы в %, но фиксированная высота естественно нет, как сделать так чтоб оба этих фиксированных больших элемента подстраивались тоже под это и были бы на одной линии.

2) Можно ли данную задачу как-то реализовать без помощи margin, а например border(правда с трудом сам верю - но может есть какая магия)

BETEPAH 23.07.2014 22:17

cha0s,
думал, что дело в отсутствии точек. Оказалось, что нет. Я решительно не понимаю, как элемент может одновременно иметь фиксированные размеры и подстраиваться.

cha0s 23.07.2014 22:26

Я решительно не понимаю, как элемент может одновременно иметь фиксированные размеры и подстраиваться.

я же пишу "но фиксированная высота естественно нет" :)

вообщем, когда будешь менять размер экрана увидишь что они бывает не все на одной линии, это из-за фиксированной высоты стоящей у некоторых div'ov, как сделать так чтоб они подгонялись и все были одинаково по линии некто не уходил не выше и не ниже.

и что по 2-ому вопросу?;)

BETEPAH 23.07.2014 22:33

cha0s,
ну, так не делайте фиксированную высоту. Делайте ее для левой колонки 100% от родителя в десктопном лайауте.

cha0s 23.07.2014 22:55

спасиб, но вот с этим нужна помощь, у меня почему-то сразу пропадает 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, время: 09:43.