#html #css #twitter-bootstrap #twitter-bootstrap-3 #bootstrap-3
Вопрос:
Я сделал макет для показа товаров для покупок в интернет-магазине с помощью Bootstrap 3, и он выглядит так:
[![захват][1]][1]
Как вы можете видеть, между контейнером и разделительной линией есть зазор, и мне нужно удалить этот зазор. Таким образом, контейнер с пленками будет прилипать к правой стороне.
И вот код для этого:
lt;sectiongt; lt;div class="flex-kit-game-shop-main"gt; lt;!--Books --gt; lt;div id="training-kit" style="background-color: #339966 !important;" class=""gt; lt;div class="card bg-transparent border-0 m-r-card"gt; lt;div class=""gt; lt;div class="title-tab-shop"gt; lt;!-- Nav tabs --gt; lt;ul class="nav nav-tabs"gt; ... lt;/ulgt; lt;!-- Tab panes --gt; lt;div class="tab-content"gt; lt;div class="tab-pane container active" id="latest-products"gt; ... lt;/divgt; lt;div class="tab-pane container fade" id="most-bied"gt; ... lt;/divgt; lt;div class="tab-pane container fade" id="popular-products"gt; ... lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;!--Films --gt; lt;div id="training-kit" style="background-color: #0066ff !important;" class="" gt; lt;div class="card bg-transparent border-0 m-r-card" gt; lt;div class=""gt; lt;div class="title-tab-shop"gt; lt;!-- Nav tabs --gt; lt;ul class="nav nav-tabs"gt; ... lt;/ulgt; lt;!-- Tab panes --gt; lt;div class="tab-content"gt; lt;div class="tab-pane container active" id="latest-products"gt; ... lt;/divgt; lt;div class="tab-pane container fade" id="best-selling-products"gt; ... lt;/divgt; lt;div class="tab-pane container fade" id="popular-products"gt; ... lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/sectiongt; Я могу прикрепить элементы контейнера для пленок справа, сказав margin-right:-10px; , что это повлияет на добавляемые продукты и сделает их больше, чем их обычный размер.
Итак, как я могу правильно расположить этот контейнер с пленками справа в начальной загрузке?
Файл CSS:
.flex-kit-game-shop-main { display: flex; flex-direction: row; } @media screen and (max-width: 1200px) { .flex-kit-game-shop-main { flex-direction: column; } }
Ответ №1:
Перейдите в файл вашего css. Найдите селектор «.flex-комплект-игровой магазин-главный». Вероятно, отображаемое значение вашего верхнего родительского элемента div — «flex»(дисплей:flex;). Если это так, я бы рекомендовал вам изучить концепцию «flexbox» в css. И тогда вы будете знать, что вам следует делать.
Комментарии:
1. Да, он установлен на
display:flex;2. Не могли бы вы, пожалуйста, сказать мне, что я должен делать
3. Пожалуйста, разместите содержимое вашего css-файла здесь.
4. Я просто добавил это
Ответ №2:
Лучший вариант здесь-использовать float свойство в CSS
выберите поле, которое вы хотите выровнять по стороне, а затем добавьте float: left; , также не забудьте очистить поплавок, если позже вы не захотите использовать его дальше, для этого добавьте clear: both;