Как сверстать подобный список в bootstrap?

Question

[Pantene742]

Колонкам со временем потом хочу задавать фон.

Answer 1

[Андрей Зубков]

<div class="container">
	<div class="row">
		<div class="col-md-1">Mon</div>
		<div class="col-md-1">13:00</div>
		<div class="col-md-1">14:00</div>
	</div>
	<div class="row">
		<div class="col-md-1">Tue</div>
		<div class="col-md-1">15:00</div>
		<div class="col-md-1">16:00</div>
	</div>
	<div class="row">
		<div class="col-md-1">Wed</div>
		<div class="col-md-1">17:00</div>
		<div class="col-md-1">18:00</div>
	</div>
	<div class="row">
		<div class="col-md-1">Thu</div>
		<div class="col-md-1">19:00</div>
		<div class="col-md-1">20:00</div>
	</div>
	<div class="row">
		<div class="col-md-1">Fri</div>
		<div class="col-md-1">5:00</div>
		<div class="col-md-1">6:00</div>
	</div>
	<div class="row">
		<div class="col-md-1">Sat</div>
		<div class="col-md-1">7:00</div>
		<div class="col-md-1">8:00</div>
	</div>
	<div class="row">
		<div class="col-md-1">Sun</div>
		<div class="col-md-1">9:00</div>
		<div class="col-md-1">10:00</div>
	</div>
</div>

Comments

[Pantene742]

Спасибо. Имено так и буду верстать. Просто я не понимаю зачем в bootstrap ms или md и другие виды колонок. Надеюсь именно по вашей смогу добиться нужного вида

[Pantene742]

Как добавить border в col-md блок ? пробовал присвоить ему display block не помогает .

[Константин Теплоухов]

Pantene742, md , lg ,sm ... нужны для адаптивности . Посмотрите тут prntscr.com/i47zkt (https://getbootstrap.com/docs/4.0/layout/grid/)

[Константин Теплоухов]

Pantene742, Лично я бы сделал внутри дива md (или какой там у вас) ещё один . wrap - или как-то так . Мне почему-то кажется что лучше не добавлять стили для классов самого бутстрапа . (с) Это моё личное мнение и скорее всего оно не верно .

[Pantene742]

Константин Теплоухов, не верно, скорее всего потому что файл custom.css в доках бутстрапа советуют подключать после самого min.css. И я много раз качал готовые темы. Все было на переопределенных стилях.

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

Answer 2

[Андрей Котосин]

Либо можно использовать простую таблицу bootstrap (можно даже адаптивную), и уже для столбцов определенных задавать стили. или для конкретных елементов внутри таблицы. bootstrap-3.ru/css.php#tables

Comments

[Pantene742]

Большое спасибо. ссылочка полезная
Я думал что я что то недопонимаю. А просто в ангуляре не в том порядке подключил стили. И они не перекрывали.