Как избежать того, чтобы CSS Bootstrap резервировал нежелательное пространство внутри контейнера в правом конце? ⇐ CSS

Разбираемся в CSS
Ответить
Anonymous
 Как избежать того, чтобы CSS Bootstrap резервировал нежелательное пространство внутри контейнера в правом конце?

Сообщение Anonymous »

Я использую Bootstrap 5 в своем проекте для верстки. Содержимое не занимает все пространство внутри родительского контейнера, и слева имеется несколько смещений, иногда перекрывающихся элементов, из-за чего макет не соответствует логике контейнера-строки-столбца.
Ссылка на файл начальной загрузки

Код: Выделить всё

[*]
У меня есть две проблемы.
  • Существуют отрицательные поля в 12 пикселей, в основном содержимое перемещается влево. Я использую m-0, чтобы компенсировать эту проблему на отдельных элементах div, где форматирование отключено.
  • Как показано на изображении, пространство показано перекрестными пунктирными линиями, что независимо от того, что я попытка сделать не исчезает.
Справочное изображение

Изображение

Html-код и внешний CSS-код

Код: Выделить всё

:root {
--primary-color: #FFFFFF;
--secondary-color: #000000;
--teritiary-color: #3a3a3a;
--background-color: white;
--font-color: #3a3a3a;
--base-distance: 10px;
--double-distance: 20px;
--selected-color-dim: 45px;
--bs-primary: #3a3a3a;  /* Your custom primary color */
}

#header {
padding: 10px;
}

#footer {
background-color: var(--teritiary-color);
color: var(--primary-color);
padding: var(--double-distance);
margin-top: var(--base-distance);

}
#header-title-container{
height:auto;
padding-top:1rem;
padding-bottom:1rem;
}
.fixed-row {
position: fixed;
top: 0;
left: 0;
width: 100%;
/* Ensures it spans the full width of the viewport */
z-index: 1050;
/* Ensures it stays on top of other elements */
background-color: var(--background-color);
/* Optional: Set a background to avoid transparency */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* Optional: Add a shadow for better visibility */
}
.card{
padding:0;
}

body {
margin-top: 60px;
background-color: var(--background-color);
color: var(--font-color);
height: 100%;
}

.z-dark-btn {
background-color: var(--teritiary-color);
color: var(--background-color);
}

.z-light-btn {
border: 2px solid #3a3a3a;
}
.color-indicator {
width: 32px;
height: 32px;
}

#hamburger-menu-container,
#search-container {
display: none;
}

.social_media_handles {
color: #FFFFFF;
}

.container {
max-width: 1000px;
}

.color-border {
min-width: var(--selected-color-dim) !important;
min-height: var(--selected-color-dim) !important;
}
.colors-container{
min-height: var(--selected-color-dim) !important;
}

/* Start Generic */
.mt-1r{
margin-top: 1rem !important;
}
.w-100p{
width:100%;
}
/* End Generic */

/* Start Bootstrap Override */
.btn-primary{
background-color: var(--teritiary-color);
border-color: var(--teritiary-color);
}

.btn-outline-primary{
border-color: var(--teritiary-color);
color: var(--teritiary-color)
}

/* Login Popup styling */
.popup-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}

.popup {
background: white;
padding: 20px;
border-radius: 8px;
width: 300px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
}

.popup input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}

.popup button {
padding: 10px 20px;
background: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

.popup button:hover {
background: #0056b3;
}

.error {
color: red;
}

Код: Выделить всё
















.address-item {
border:  4px solid black;
}

.address-title {
font-weight: bold;
}

.selected-addr {
background-color: aquamarine;
}

#checkout-items {
padding: 0;
padding-left: 24px;
margin: 0;
}

#payment-container {
width: 106%;
margin: 0;
padding:  0;
}





















                                                         & l t ; p a t h < b r   / >                                                                 d = " M 1 9 . 2 7 7 3 4 3 7 5 , 4 6 . 1 3 2 8 1 2 5 l 0 . 9 5 7 0 3 1 2 5 , 0 . 1 5 6 2 5 q 0 . 7 2 2 6 5 6 2 5 , 0 . 1 1 7 1 8 7 5 , 0 . 7 2 2 6 5 6 2 5 , 0 . 6 4 4 5 3 1 2 5 l 0 , 1 . 0 3 5 1 5 6 2 5 q - 1 0 . 0 7 8 1 2 5 - 0 . 1 5 6 2 5 - 2 0 . 1 5 6 2 5 , 0 l 1 4 . 2 3 8 2 8 1 2 5 - 2 3 . 2 8 1 2 5 l - 7 . 0 3 1 2 5 , 0 q - 1 . 7 7 7 3 4 3 7 5 , 0 - 2 . 6 7 5 7 8 1 2 5 , 0 . 7 8 1 2 5 q - 0 . 9 1 7 9 6 8 7 5 , 0 . 8 0 0 7 8 1 2 5 - 1 . 9 3 3 5 9 3 7 5 , 3 . 0 2 7 3 4 3 7 5 l - 1 . 6 4 0 6 2 5 , 0 l 1 . 4 0 6 2 5 - 5 . 6 4 4 5 3 1 2 5 l 1 . 7 1 8 7 5 , 0 q 1 . 3 2 8 1 2 5 , 0 . 2 7 3 4 3 7 5 , 4 . 2 3 8 2 8 1 2 5 , 0 . 2 7 3 4 3 7 5 l 1 2 . 9 1 0 1 5 6 2 5 , 0 l - 1 4 . 2 3 8 2 8 1 2 5 , 2 3 . 2 8 1 2 5 l 3 . 4 9 6 0 9 3 7 5 , 0 q 2 . 5 , 0 , 4 . 0 4 2 9 6 8 7 5 - 0 . 7 0 3 1 2 5 q 1 . 5 6 2 5 - 0 . 6 8 3 5 9 3 7 5 , 2 . 9 4 9 2 1 8 7 5 - 2 . 3 8 2 8 1 2 5 l 1 . 8 7 5 - 2 . 3 0 4 6 8 7 5 l 2 . 0 1 1 7 1 8 7 5 , 0 q - 1 . 6 2 1 0 9 3 7 5 , 2 . 3 6 3 2 8 1 2 5 - 2 . 8 9 0 6 2 5 , 5 . 1 1 7 1 8 7 5 z   M 3 2 . 9 6 8 7 5 , 2 6 . 4 8 4 3 7 5 l 0 , 1 8 . 1 2 5 q 0 , 1 . 0 3 5 1 5 6 2 5 , 0 . 6 2 5 , 1 . 4 5 5 0 7 8 1 2 5 t 2 . 3 2 4 2 1 8 7 5 , 0 . 5 3 7 1 0 9 3 7 5 l 0 , 1 . 3 6 7 1 8 7 5 q - 5 . 7 6 1 7 1 8 7 5 - 0 . 1 9 5 3 1 2 5 - 1 1 . 5 6 2 5 , 0 l 0 - 1 . 3 6 7 1 8 7 5 q 1 . 6 9 9 2 1 8 7 5 - 0 . 1 1 7 1 8 7 5 , 2 . 3 3 3 9 8 4 3 7 5 - 0 . 5 3 7 1 0 9 3 7 5 t 0 . 6 3 4 7 6 5 6 2 5 - 1 . 4 5 5 0 7 8 1 2 5 l 0 - 1 8 . 1 2 5 q 0 - 1 . 0 3 5 1 5 6 2 5 - 0 . 6 3 4 7 6 5 6 2 5 - 1 . 4 5 5 0 7 8 1 2 5 t - 2 . 3 3 3 9 8 4 3 7 5 - 0 . 5 3 7 1 0 9 3 7 5 l 0 - 1 . 3 6 7 1 8 7 5 q 5 . 8 0 0 7 8 1 2 5 , 0 . 1 9 5 3 1 2 5 , 1 1 . 5 6 2 5 , 0 l 0 , 1 . 3 6 7 1 8 7 5 q - 1 . 6 9 9 2 1 8 7 5 , 0 . 1 1 7 1 8 7 5 - 2 . 3 2 4 2 1 8 7 5 , 0 . 5 3 7 1 0 9 3 7 5 t - 0 . 6 2 5 , 1 . 4 5 5 0 7 8 1 2 5 z   M 5 2 . 4 0 2 3 4 3 7 5 , 3 7 . 3 2 4 2 1 8 7 5 l 3 . 0 2 7 3 4 3 7 5 , 4 . 1 9 9 2 1 8 7 5 q 3 . 6 1 3 2 8 1 2 5 , 4 . 9 6 0 9 3 7 5 , 6 . 2 8 9 0 6 2 5 , 5 . 2 5 3 9 0 6 2 5 l - 0 . 9 5 7 0 3 1 2 5 , 1 . 5 0 3 9 0 6 2 5 q - 1 . 2 6 9 5 3 1 2 5 , 0 - 2 . 3 6 3 2 8 1 2 5 - 0 . 1 5 6 2 5 q - 0 . 9 9 6 0 9 3 7 5 - 0 . 1 3 6 7 1 8 7 5 - 2 . 3 8 2 8 1 2 5 - 0 . 625q-2.7734375-0.99609375-5.09765625-4.296875l-3.3984375-4.8828125q-0.1171875,0.0390625-0.21484375,0.0390625l-0.87890625,0.13671875l0,6.11328125q0,1.03515625,0.60546875,1.46484375q0.625,0.41015625,2.28515625,0.52734375l0,1.3671875q-5.68359375-0.15625-11.40625,0l0-1.3671875q1.66015625-0.1171875,2.28515625-0.52734375q0.60546875-0.4296875,0.60546875-1.46484375l0-18.4375q0-0.87890625-0.556640625-1.220703125t-2.099609375-0.458984375l0-1.3671875q1.54296875,0.078125,3.61328125,0.078125q1.26953125,0,3.80859375-0.0390625q0.46875,0,1.083984375-0.009765625t0.947265625-0.01953125t0.5078125-0.009765625q11.40625,0,11.40625,6.796875q0,5.2734375-7.109375,7.40234375z M49.04296875,24.5703125l-2.6171875,0l0,12.32421875l0.80078125-0.078125q6.9140625-0.72265625,6.93359375-6.640625q0-2.63671875-1.2890625-4.12109375t-3.828125-1.484375z M75.5859375,22.48046875q5.1953125,0,8.5546875,3.65234375q3.359375,3.61328125,3.359375,9.55078125q0,5.5859375-3.37890625,9.2578125q-3.37890625,3.6328125-8.49609375,3.6328125q-5.1953125,0-8.5546875-3.6328125q-3.359375-3.65234375-3.359375-9.5703125q0-5.5859375,3.37890625-9.23828125q3.359375-3.65234375,8.49609375-3.65234375z M76.26953125,46.89453125q2.40234375,0,3.828125-2.59765625q1.4453125-2.6171875,1.4453125-7.55859375q0-5.37109375-1.8359375-8.96484375q-1.85546875-3.61328125-4.765625-3.61328125q-2.40234375,0-3.84765625,2.6171875q-1.42578125,2.59765625-1.42578125,7.55859375q0,5.37109375,1.8359375,8.96484375t4.765625,3.59375z">



[img]https://res.ziroindia.in/logos/High-Resolution-Color-Logo-on-Transparent-Background-compact.png[/img]


















Home
About Us
Contact Us


Search




Checkout Products


Chino

1
L
1999






Polo
style="background-color: rgb(227, 223, 215);">
1
M
1299






Chino

1
M
1999









Addresses


addr16 - Bharat Kamsani

  GREEN TERRACES
Bandlaguda, Nagole
HYDERABAD 500068




Home - Bharat Kamsani

GREEN TERRACES

HYDERABAD 500068
0123456677 bharat@gmail.com












Add Address

New Address



Payment Summary


Apply Coupon


Price
5297


Product Discount
464.95


Coupon Discount
0


Discount
464.95


Sale Price
4832.05










[img]https://res.ziroindia.in/logos/High-Resolution-Logo-White-on-Transparent-Background-compact.png[/img]

Crafted in India, for India.  At ZIRO, our mission is to
redefine fashion for Indian men's wardrobe by combining style with unparalleled comfort and fitting.


[url=https://www.instagram.com/ziro_apparel/]




[/url]






[url=https://twitter.com/ziro_apparel]




[/url]












style="z-index: 2147483647; position: fixed; top: 0px; display: none; left: 0px; height: 100%; width: 100%; max-height: 100dvh; backface-visibility: hidden;  overflow-y: visible;">

@keyframes rzp-rot {
to {
transform: rotate(360deg);
}
}

@-webkit-keyframes rzp-rot {
to {
-webkit-transform: rotate(360deg);
}
}

.razorpay-container>iframe {
min-height: 100% !important;
}


Test
Mode


Попробовал установить ширину на 100 %, отступы и поля на 0, чтобы содержимое всегда находится внутри родительского контейнера и занимает всю ширину контейнера. В случае переполнения последний блок столбцов перемещается ниже текущей строки.

Подробнее здесь: https://stackoverflow.com/questions/793 ... o-the-righ
Вернуться к началу
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»