Ребята, кто подскажет как лучше сверстать данный элемент в бутстрапе? Не получается убрать отступы между элементами и растянуть на всю ширину экрана?

Question

[Максим Варава]

Пример моего кода:

<div class="Reviews text-left col-md-12">
	<div class="rev">
		<img src="img/img1.png">
		<span>http://www.reputazzi.com</span>
		<a href="#">Смотреть обзор</a>
	</div>
</div>

.Reviews img {
	width: 50px;
	height: 50px;
}

.Reviews span {
	background: #e3e3e3;
	padding: 15px 30px;
}
.Reviews a{
	background: #009cff;
	color: #fff;
	padding: 15px 30px;
	text-decoration: none;
}

Comments

[Ярослав Иванов]

Где тут бутстрап ? col-md-12

[Максим Варава]

Ярослав Иванов: Верстать с помощью table или есть другие варианты? Недавно бутстрап использую, с такими элементами еще не сталкивался.

[alvvi]

Максим Варава: верстать с помощью сетки

[alex]

Максим Варава: зачем тут бутстрап вообще? зачем вы цифру в виде картинки сделали? это верстается с помощью flexbox, цифру можно через css сделать с помощью counter-increment и :before

[Ankhena]

Alex:

цифру можно через css сделать с помощью counter-increment и :before

зачем такая жуть?
Нельзя, по старинке, цифру сделать цифрой в рамочке?

Максим Варава

Не получается убрать отступы между элементами

О каких отступах речь?
Вижу только те, что Вы сами же и написали.

[alex]

Ankhena W: почему жуть? ничего жуткого не вижу)

Нельзя, по старинке, цифру сделать цифрой в рамочке?

Можно) главное чтоб не картинкой в <img />

[Ankhena]

Alex: жуть по количеству лишнего, ничем не оправданного, кода

[alex]

Ankhena W: лишнего? я наоборот сэкономил на разметке

[Ankhena]

Alex: на DOM'е да, на коде нет.

[alex]

Ankhena W: у автора вероятней всего список, браузер элементы списка по умолчанию стилизует цифрами - ol, или точками - ul, я по сути сделал тоже самое, сделал кастомную стилизацию + эти цифры не относятся к контенту, они больше относятся к оформлению и показывают юзеру упорядоченность, а значит их спокойно можно сделать через css. так что я думаю мой код оправдан. наверно каждый останется при своем мнении как правильно)

Answer 1

[alex]

spoiler

<ul class="Reviews col-md-12">
      <li class="rev"><span>Lorem ipsum dolor.</span><a href="#">Смотреть обзор</a></li>
      <li class="rev"><span>Lorem ipsum dolor.</span><a href="#">Смотреть обзор</a></li>
      <li class="rev"><span>Lorem ipsum dolor.</span><a href="#">Смотреть обзор</a></li>
</ul>

.Reviews {
  counter-reset: a;
}

.rev {
  display: flex;
  height: 50px;
  counter-increment: a;
  margin-bottom: 10px;
}

.rev:before {
  content: counter(a);
  display: block;
  flex-basis: 50px;
  background-color: #fff;
  border: 1px solid currentColor;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0af;
}

.rev span {
  background-color: #ccc;
  height: 100%;
  display: flex;
  align-items: center;
  flex-grow: 1;
  padding: 0 30px;
}

.rev a {
  background: #009cff;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: 0 15px;
}

Comments

[Максим Варава]

Огромное спасибо!

Answer 2

[Александр]

margin: 0;
Не подходит?