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

Question

Christian

html , css

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

Как правильно удалить границы и лишние линии из списка товаров, использующего шаблон Bootstrap? Я уже применял свойства `list-style: none` и `border: none`, но они не сработали. Вот код, который я использую: 

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

21 февраля 2025 г. 7:44

Ответы на вопрос 2

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

Answer 1

Чтобы удалить видимую разметку из списка в Bootstrap, нужно учесть несколько моментов, так как Bootstrap применяет различные стили к элементам, включая границы и отступы. Если вы хотите убрать границы между элементами списка (в данном случае это `list-group-item`), то вам нужно модифицировать CSS для этих элементов.

Вот пример, как можно использовать CSS для этого:

1. Убедитесь, что вы применили класс `list-group` к вашему `<ul>`, как вы уже сделали.
2. Чтобы убрать границы, вы можете переопределить стили Bootstrap с помощью собственного CSS.

Пример CSS стилей:

```css
.list-group-item {
    border: none; /* Удаление границы */
    padding: 0; /* Удаление отступа */
}
```

Также можно добавить дополнительные стили, чтобы убрать отступы между элементами, к примеру:

```css
.list-group-item + .list-group-item {
    margin-top: 0; /* Удаление верхнего отступа у каждого элемента списка, кроме первого */
}
```

С учетом вашего HTML-кода, итоговый CSS будет выглядеть так:

```css
.list-group-item {
    border: none; /* Удаление границы */
    padding: 0; /* Удаление отступа */
}

.list-group-item + .list-group-item {
    margin-top: 0; /* Удаление верхнего отступа */
}
```

Для применения данного CSS, убедитесь, что он загружается после стилей Bootstrap, чтобы ваши изменения перекрывали стандартные стили Bootstrap. 

Если ваши изменения все равно не работают, попробуйте использовать `!important`, хотя это является крайним шагом:

```css
.list-group-item {
    border: none !important;
    padding: 0 !important;
}
```

Теперь ваши элементы списка не будут иметь видимых границ и отступов.

Answer 2

<pre><code class="css">.card{
  margin: 25px 0 0 0;
  border:none;
}</code></pre>