Задать вопрос
@reflexiya

Как убрать видимую разметку у списка CSS?

Пишу карточки товаров, взял шаблон с bootstrap, но там имеются границы/линии/разметка у списка. я хочу это убрать, но получилось у меня убрать только внутреннюю разметку, list-style: none и border: none почему-то не работают.
Код прилигаю:
<div id="project" class="portfolio">
			<div class="container">
				<div class="title text-center">
					<h2>Актуальные объекты недвижмости</h2>
				</div>
				<div class="row">
					<div class="col-md-6">
						<div class="card">
							<img src="img/portfolio1.png" class="card-img-top" alt="apart">
							<div class="card-body">
							  <h5 class="card-title">2 ком.квартира ЖК Idel Tower</h5>
							</div>
							<ul class="list-group list-group-flush">
							  <li class="list-group-item"><img class="product-image" src="img/area.png" alt="area"> Площадь: 45м2</li>
							  <li class="list-group-item"><img class="product-image" src="img/location.png" alt="location"> Проспект Октября 107Б</li>
							  <li class="list-group-item"><img class="product-image" src="img/build.png" alt="build"> Этаж 24/25</li>
							  <li class="nav-item"> <button class="button">Узнать подробнее</button></li>
							</ul>
						</div>
					</div>
					<div class="col-md-6">
						<div class="card">
							<img src="img/portfolio1.png" class="card-img-top" alt="...">
							<div class="card-body">
							  <h5 class="card-title">2 ком.квартира ЖК Idel Tower</h5>
							</div>
							<ul class="list-group list-group-flush">
							  <li class="list-group-item"><img class="product-image" src="img/area.png" alt="area"> Площадь: 45м2</li>
							  <li class="list-group-item"><img class="product-image" src="img/location.png" alt="location"> Проспект Октября 107Б</li>
							  <li class="list-group-item"><img class="product-image" src="img/build.png" alt="build"> Этаж 24/25</li>
							  <li class="nav-item"> <button class="button">Узнать подробнее</button></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6">
						<div class="card">
							<img src="img/portfolio1.png" class="card-img-top" alt="...">
							<div class="card-body">
							  <h5 class="card-title">2 ком.квартира ЖК Idel Tower</h5>
							</div>
							<ul class="list-group list-group-flush">
							  <li class="list-group-item"><img class="product-image" src="img/area.png" alt="area"> Площадь: 45м2</li>
							  <li class="list-group-item"><img class="product-image" src="img/location.png" alt="location"> Проспект Октября 107Б</li>
							  <li class="list-group-item"><img class="product-image" src="img/build.png" alt="build"> Этаж 24/25</li>
							  <li class="nav-item"> <button class="button">Узнать подробнее</button></li>
							</ul>
						</div>
					</div>
					<div class="col-md-6">
						<div class="card">
							<img src="img/portfolio1.png" class="card-img-top" alt="...">
							<div class="card-body">
							  <h5 class="card-title">2 ком.квартира ЖК Idel Tower</h5>
							</div>
							<ul class="list-group list-group-flush">
							  <li class="list-group-item"><img class="product-image" src="img/area.png" alt="area"> Площадь: 45м2</li>
							  <li class="list-group-item"><img class="product-image" src="img/location.png" alt="location"> Проспект Октября 107Б</li>
							  <li class="list-group-item"><img class="product-image" src="img/build.png" alt="build"> Этаж 24/25</li>
							  <li class="nav-item"> <button class="button">Узнать подробнее</button></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>

/* ------------------------------
  portfolio
---------------------------------*/
.portfolio {
  background: #ffffff;
  padding: 0px 0 140px;
}
.portfolio .text {
  border-radius: 5px;
  margin-left: 153px;
  margin-right: 40px;
  padding: 20px;
  text-align: left;
  top: -70px;
  position: relative;
  background: #fff;
  margin-bottom: -40px;
  box-shadow: 0 5px 38px -6px rgba(0, 0, 0, 0.14);
}
.portfolio .text h5 {
  color: #ff5252;
}
.list-group {
  list-style: none; /* Убираем стандартные маркеры списка */
  padding: 0; /* Убираем отступы */
  margin: 0; /* Убираем отступы */
}
.list-group-flush{
  list-style: none;
  list-style-type: none;
  border: none;
}
/* Убираем рамки у элементов списка */
.list-group-item {
  border: none; /* Убираем рамки */
  padding: 10px; /* Устанавливаем отступы */
  display: flex; /* Сделаем элементы списка flex-контейнерами */
  align-items: center; /* Вертикальное выравнивание содержимого */
}
.card{
  margin: 25px 0 0 0;
}


67b82d65e8075702234728.png
  • Вопрос задан
  • 181 просмотр
Подписаться 1 Простой Комментировать
Решения вопроса 1
@atabrakadabra
.card{
  margin: 25px 0 0 0;
  border:none;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы