Расположение предмета в Div с начальной загрузкой 5.3 не отображается, как я и ожидал ⇐ Html

[Anonymous]

Добрый день, все, < /p>
, чтобы дать вам немного опыта, я не новичок в разработке и сделал различные языки, однако мой уровень знаний HTML во время роста все еще очень Гораздо больше на базовый уровень, чем продвинутый. Это совершенно отзывчиво. Я решил пойти с Bootstrap 5.3 для этого, и я хорошо справляюсь с этим, однако я столкнулся с особой проблемой, с которой я не могу разобраться, я надеюсь, что некоторые из вас гораздо более опытные и знающие люди здесь могут помочь Я с и попытаюсь объяснить мне это. У меня есть. < /P>


Customer Portal





[*] rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@fontsourc ... /index.css"
integrity="sha256-tXJfXfp6Ewt1ilPzLDtQnJV4hclT9XuaZUKyUvmyr+Q="
crossorigin="anonymous"
/>




< /code>
Раздел тела < /p>






Home

• Home

Quickly Connect with us on Whatsapp








Click here to start conversation



Click here to start conversation

















< /code>
CSS Extracts (все из того же файла) < /p>
.text-center {
text-align: center !important;
}

.info-box {
box-shadow: 0 0 1px rgba(var(--bs-body-color-rgb), 0.125), 0 1px 3px rgba(var(--bs-body-color-rgb), 0.2);
border-radius: 0.375rem;
position: relative;
display: flex;
width: 100%;
min-height: 80px;
padding: 0.5rem;
margin-bottom: 1rem;
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
}

.info-box .info-box-content {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
padding: 0 10px;
line-height: 1.8;
}

.col-12 {
flex: 0 0 auto;
width: 100%;
}

.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
margin-top: var(--bs-gutter-y);
}

.col {
flex: 1 0 0%;
}

.col-md-6 {
flex: 0 0 auto;
width: 50%;
}
< /code>
Это отображает следующее изображение: < /p>
, хотя я не недоволен этим, и отзывчивая сторона вещей действительно работает, я надеялся, что я надеялся Установка дальше и сделать его более визуально привлекательным и надеялся перевести его на более похожее на следующее отредактированное изображение.

ожидаемый выход < /p>
Я просматривал все Примеры и документация на веб-сайте Bootstrap, и я обнаружил, что использует класс Text-Cest на верхнем уровне DIV, чтобы централизовать контент внутри него, однако, который не работает для кнопки. Я пытался добавить его на нескольких уровнях, и она никогда не централизует кнопку. Код, однако, если есть какие -либо дополнительные вопросы, пожалуйста, дайте мне знать.>

Подробнее здесь: https://stackoverflow.com/questions/794 ... uld-expect