Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.07.2014, 00:24
Кандидат Javascript-наук
Отправить личное сообщение для cha0s Посмотреть профиль Найти все сообщения от cha0s
 
Регистрация: 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 есть какой-то класс для этого?
Ответить с цитированием
  #2 (permalink)  
Старый 23.07.2014, 11:59
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

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

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

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

Последний раз редактировалось ixth, 23.07.2014 в 12:12.
Ответить с цитированием
  #3 (permalink)  
Старый 23.07.2014, 12:39
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

cha0s,
Вы хотите использовать сетку, но вместе с тем сломать эту сетку своими маржинами? Единственное, что из бутстраповских классов может быть использовано - это маржины, кратные единице сетки - .col-md-offset-*
Ответить с цитированием
  #4 (permalink)  
Старый 23.07.2014, 21:43
Кандидат Javascript-наук
Отправить личное сообщение для cha0s Посмотреть профиль Найти все сообщения от cha0s
 
Регистрация: 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.
Ответить с цитированием
  #5 (permalink)  
Старый 23.07.2014, 21:51
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от cha0s
то есть у меня в сетке используется .col-md суммой всего 11, а одно расстояние я раскидал на margin равной этой % величине, на мелком разрешение не столь важно пока что они складываются не особо идеально, вопрос в том что левый блог(красный) и увеличенный квадрат у меня имеют фиксированный height и при изменения экрана мои margin которые в % естественно меняются, а фиксированная высота само собой нет, не подскажешь что тут можно предпринять чтоб этот? чтоб все они были одинаковые по отступам и снизу на одной линии, у меня съезжает не много ;/ да и правая колонка должна быть без разрывов одной полосой)) левая получилась такая, а вот правая что-то не выходит, делаю одним блогом(фиксированной длиной) и сразу как-то все ломается
У Вас на клавиатуре есть кнопка с точкой? Прочитал 2 раза, ничего не понял.
Ответить с цитированием
  #6 (permalink)  
Старый 23.07.2014, 21:59
Кандидат Javascript-наук
Отправить личное сообщение для cha0s Посмотреть профиль Найти все сообщения от cha0s
 
Регистрация: 21.10.2013
Сообщений: 125

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

2) Можно ли данную задачу как-то реализовать без помощи margin, а например border(правда с трудом сам верю - но может есть какая магия)
Ответить с цитированием
  #7 (permalink)  
Старый 23.07.2014, 22:17
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

cha0s,
думал, что дело в отсутствии точек. Оказалось, что нет. Я решительно не понимаю, как элемент может одновременно иметь фиксированные размеры и подстраиваться.
Ответить с цитированием
  #8 (permalink)  
Старый 23.07.2014, 22:26
Кандидат Javascript-наук
Отправить личное сообщение для cha0s Посмотреть профиль Найти все сообщения от cha0s
 
Регистрация: 21.10.2013
Сообщений: 125

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

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

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

и что по 2-ому вопросу?
Ответить с цитированием
  #9 (permalink)  
Старый 23.07.2014, 22:33
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

cha0s,
ну, так не делайте фиксированную высоту. Делайте ее для левой колонки 100% от родителя в десктопном лайауте.
Ответить с цитированием
  #10 (permalink)  
Старый 23.07.2014, 22:55
Кандидат Javascript-наук
Отправить личное сообщение для cha0s Посмотреть профиль Найти все сообщения от cha0s
 
Регистрация: 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% высота)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск