Как модифицировать этот блок?

Question

[Евгений]

В общем есть вот такой блок бутстраповский естественно.


Вот его код

Код блока

<div class="col-lg-6 col-md-6">
				<!-- Pricing Item -->
				<div class="pricing-item">
					<div class="pricing-heading">
						<!-- Title -->
						<div class="title">
							<h6>Сварщик-слесарь 1 разряда</h6>
						</div>
						<!-- Price -->
						<div class="price">
							<p>Зарплата</p>
							<h2>700<span>р</span></h2>

						</div>
					</div>
					<div class="pricing-body">
						<!-- Feature List -->
						<ul class="feature-list m-0 p-0">
							<li><p><span class="fa fa-check-circle available"></span>График 2/2</p></li>
							<li><p><span class="fa fa-check-circle available"></span>Соц.пакет</p></li>
							<li><p><span class="fa fa-check-circle available"></span>Отпуска и премии</p></li>
							<li><p><span class="fa fa-check-circle available"></span>Общежитие для иногородних</p></li>
						</ul>

					</div>


					<div class="pricing-footer text-center">
						<a href="#" class="btn btn-transparent-md">Откликнуться</a>
					</div>
				</div>
			</div>

Хочу добавить справа ещё столбик, чтобы можно было выводить требования из бд. Как то схематично вот так


Что-то мучаю этот блок и всё не то совсем. Не подскажете как этот столбик добавить ?

Answer 1

[aloky]

а нельзя row > col-md-6 и col-md-6 ?

Comments

[Евгений]

Я так пробовал)

<div class="row">
			<div class="col-lg-6 col-md-6">
				<!-- Pricing Item -->
				<div class="pricing-item">
					<div class="pricing-heading">
						<!-- Title -->
						<div class="title">
							<h6>Сварщик-слесарь 1 разряда</h6>
						</div>
						<!-- Price -->
						<div class="price">
							<p>Зарплата</p>
							<h2>700<span>р</span></h2>

						</div>
					</div>
					<div class="row">
					<div class="pricing-body col-md-6">
						<!-- Feature List -->
						<ul class="feature-list m-0 p-0">
							<li><p><span class="fa fa-check-circle available"></span>График 2/2</p></li>
							<li><p><span class="fa fa-check-circle available"></span>Соц.пакет</p></li>
							<li><p><span class="fa fa-check-circle available"></span>Отпуска и премии</p></li>
							<li><p><span class="fa fa-check-circle available"></span>Общежитие для иногородних</p></li>
						</ul>

					</div>
					<div class="pricing-body col-md-6">
							<!-- Feature List -->
						<ul class="feature-list m-0 p-0">
							<li><p><span class="fa fa-check-circle available"></span>График 2/2</p></li>
							<li><p><span class="fa fa-check-circle available"></span>Соц.пакет</p></li>
							<li><p><span class="fa fa-check-circle available"></span>Отпуска и премии</p></li>
							<li><p><span class="fa fa-check-circle available"></span>Общежитие для иногородних</p></li>
						</ul>

					</div>
					<div>


					<div class="pricing-footer text-center">
						<a href="#" class="btn btn-transparent-md">Откликнуться</a>
					</div>
				</div>
			</div>

Оно вроде как и стало по две стороны , но соседнему блоку плохо сразу стало как и кнопке и пришлось вызывать ему врача(

[Евгений]

Хотя стоп. Это я инвалид криворукий div не закрыл) Всё ок)

Теперь как-то подписать столбики нужны. Мол слева Требования, Справа условия. Уже пофиг получится ли разделитель этот добавить

[aloky]

Скинь все стили для данного блока

[aloky]

Евгений, Рад за тебя, что всё получилось)

[Евгений]

Невнимательность моё второе имя) Так один раз на сервере искал ошибку 2 часа, а я просто в модели в именем косякнул)

А стили именно не бутстрапа вот.

.pricing .pricing-item .pricing-heading .title h6 {
  text-transform: uppercase;
  font-weight: 400;
  line-height: 50px;
  border-bottom: 1px solid #e5e5e5;
}

.pricing .pricing-item.featured .pricing-heading .title h6 {
  color: #fff;
  border-bottom: 1px solid #f69351;
}

.pricing.two .pricing-item .pricing-heading .title h6 {
  position: relative;
}

.pricing .pricing-item {
  border: 1px solid #e5e5e5;
}


@media (max-width: 991px) {
  .pricing .pricing-item {
    margin-bottom: 30px;
  }
}

.pricing .pricing-item .pricing-heading {
  padding: 20px 40px 30px 40px;
  background: #fafafa;
  border-bottom: 1px solid #e5e5e5;
}

.pricing .pricing-item .pricing-heading .title h6 {
  text-transform: uppercase;
  font-weight: 400;
  line-height: 50px;
  border-bottom: 1px solid #e5e5e5;
}

.pricing .pricing-item .pricing-heading .price {
  margin-top: 28px;
}

.pricing .pricing-item .pricing-heading .price h2 {
  font-size: 3.625rem;
  font-weight: 400;
  margin-bottom: 0px;
}

.pricing .pricing-item .pricing-heading .price h2 span {
  font-size: 1.5625rem;
}

.pricing .pricing-item .pricing-body {
  padding: 45px 40px;
}

.pricing .pricing-item .pricing-body ul.feature-list li {
  list-style: none;
}

.pricing .pricing-item .pricing-body ul.feature-list li p span {
  margin-right: 15px;
}

.pricing .pricing-item .pricing-body ul.feature-list li p span.available {
  color: red;
}

.pricing .pricing-item .pricing-body ul.feature-list li p span.unavailable {
  color: #d2d2d2;
}

.pricing .pricing-item .pricing-body ul.feature-list li:not(:last-child) {
  margin-bottom: 15px;
}

.pricing .pricing-item .pricing-footer {
  padding-bottom: 40px;
}

.pricing .pricing-item.featured {
  border: none;
  box-shadow: 0px 0px 30px 0px rgba(11, 29, 66, 0.15);
}

.pricing .pricing-item.featured .pricing-heading {
  background: #ff6600;
  border-bottom: 1px solid #ff6600;
}

.pricing .pricing-item.featured .pricing-heading .title h6 {
  color: #fff;
  border-bottom: 1px solid #f69351;
}

.pricing .pricing-item.featured .pricing-heading .price {
  margin-top: 28px;
}

.pricing .pricing-item.featured .pricing-heading .price h2 {
  color: #fff;
  font-size: 3.625rem;
  margin-bottom: 0px;
}

.pricing .pricing-item.featured .pricing-heading .price h2 span {
  font-size: 1.5625rem;
}

.pricing .pricing-item.featured .pricing-heading .price p {
  color: #fff;
}

.pricing.two .pricing-item {
  border: 1px solid #e5e5e5;
  overflow: hidden;
}

@media (max-width: 991px) {
  .pricing.two .pricing-item {
    margin-bottom: 30px;
  }
}

.pricing.two .pricing-item .pricing-heading {
  position: relative;
  margin-bottom: 10px;
}

.pricing.two .pricing-item .pricing-heading .title h6 {
  position: relative;
}

.pricing.two .pricing-item .pricing-heading .price {
  position: relative;
}

.pricing.two .pricing-item .pricing-heading:before {
  content: '';
  position: absolute;
  bottom: -25%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 64px 500px 0 0;
  border-color: #fafafa transparent transparent transparent;
}

.pricing.two .pricing-item .pricing-body {
  padding: 70px 40px 45px;
}

.pricing.two .pricing-item .pricing-body ul.feature-list li p span.available {
  color: #ff6600;
}

.pricing.two .pricing-item.featured .pricing-heading:before {
  border-color: #ff6600 transparent transparent transparent;
}

Хотя лучше мб css файл сам. dropmefiles.com/pips6

[Евгений]

У меня вот так получилось сделать

[aloky]

Евгений, Норм

[Евгений]

aloky, Хотя тут есть одно но. Блок левый и правый могут быть разной высоты. Причём по высоте соседняго они равняться не будут)