Изменение размера div в bootstrap, но оно не работает как надо?
Добрый день. Приветствую на данном вопросе. Вопрос максимально просто и сложен одновременно. У на дано некий div, в котором есть другие div. Это построенное за таким образом:
<div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="col-12"> <div class="img-fluid" alt="Image"></div> </div> </div> <div class="col-md-6"> <div class="col-12"> <div class="card border-0 shadow-sm p-3 mb-5 bg-white rounded" style="width: 25rem;"> <div class="card-body"> <h5 class="card-title">****************************</h5> <p class="card-text">*****************************************************</p> <p class="card-text">+************</p> <a href="" class="btn btn-dark">*******</a> </div> </div> </div> </div> </div> </div> |
<div class="container-fluid"> <div class="row"> <div class="col-md-6"> <div class="col-12"> <div class="img-fluid" alt="Image"></div> </div> </div> <div class="col-md-6"> <div class="col-12"> <div class="card border-0 shadow-sm p-3 mb-5 bg-white rounded" style="width: 25rem;"> <div class="card-body"> <h5 class="card-title">****************************</h5> <p class="card-text">*****************************************************</p> <p class="card-text">+************</p> <a href="" class="btn btn-dark">*******</a> </div> </div> </div> </div> </div> </div>
В нашем случае, при нормальных условиях(то есть полноэкранный режимом для компьютера), div работает как надо на весь размер, не превышает ширину устройства. Но при изменении его в телефонный режим, происходит баг, который я прошу помочь исправить. Размер div-а начинает превышать нужный, но при этом он остается как надо(то есть все что должно быть видно - видно), но если уменьшить размер, появляется не нужные части.
П/с забыл CSS приписать:
.container-fluid .row { margin-left: -5%; } .img-fluid { padding-left: 50%; /* Отступы в процентах */ max-width: 200%; /* Максимальная ширина 100% */ max-height: auto; /* Максимальная высота автоматически */ left: 0; width: 200%; height: 600px; z-index: 1000; display: flex; align-items: center; justify-content: center; text-align: right; padding-right: 20px; color: white; overflow: hidden; background: linear-gradient( to left, rgba(255, 255, 255, 1), transparent ), url('file:///C:/Users/user/Downloads/9e4ae833-3dd3-4742-b4bd-46f248595726.jpg'); background-size: 57% auto; background-position: -100px center; background-repeat: no-repeat; transition: all 0.3s; /* Add smooth transition */ } .col-5 h3 { font-size: 2em; /* Измените размер шрифта на 2 em */ } @media (max-width: 760px) { .col-md-6 { max-width: 100%; order: 2; /* Change the order to display the card below the image */ margin-top: 20px; /* Add some space between the image and card */ margin-left: 0px; } } .col-5::before { content: ""; padding-left: -5%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(255, 255, 255); background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 95% ); z-index: -1; } .col-5 h3 { top: 30px; margin: 0; color: rgb(0, 0, 0); text-align: right; position: absolute; top: 50%; right: 20%; transform: translateY(-50%); text-align: right; padding-left: 50%; margin-bottom: 10%; } .col-5 h4 { margin-top: 10px; color: rgb(0, 0, 0); text-align: right; position: absolute; top: 75%; right: 20%; transform: translateY(-50%); text-align: right; padding-left: 50%; } .col-md-6 .col-12 .card{ margin-left: 10%; margin-top: 10%; } .flex2, .flex3, .flex4 { margin-top: 5%; /* Регулируйте значение, чтобы настроить отступы по вашему усмотрению */ } .png{ margin-right: 2%; } |
.container-fluid .row { margin-left: -5%; } .img-fluid { padding-left: 50%; /* Отступы в процентах */ max-width: 200%; /* Максимальная ширина 100% */ max-height: auto; /* Максимальная высота автоматически */ left: 0; width: 200%; height: 600px; z-index: 1000; display: flex; align-items: center; justify-content: center; text-align: right; padding-right: 20px; color: white; overflow: hidden; background: linear-gradient( to left, rgba(255, 255, 255, 1), transparent ), url('file:///C:/Users/user/Downloads/9e4ae833-3dd3-4742-b4bd-46f248595726.jpg'); background-size: 57% auto; background-position: -100px center; background-repeat: no-repeat; transition: all 0.3s; /* Add smooth transition */ } .col-5 h3 { font-size: 2em; /* Измените размер шрифта на 2 em */ } @media (max-width: 760px) { .col-md-6 { max-width: 100%; order: 2; /* Change the order to display the card below the image */ margin-top: 20px; /* Add some space between the image and card */ margin-left: 0px; } } .col-5::before { content: ""; padding-left: -5%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(255, 255, 255); background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 95% ); z-index: -1; } .col-5 h3 { top: 30px; margin: 0; color: rgb(0, 0, 0); text-align: right; position: absolute; top: 50%; right: 20%; transform: translateY(-50%); text-align: right; padding-left: 50%; margin-bottom: 10%; } .col-5 h4 { margin-top: 10px; color: rgb(0, 0, 0); text-align: right; position: absolute; top: 75%; right: 20%; transform: translateY(-50%); text-align: right; padding-left: 50%; } .col-md-6 .col-12 .card{ margin-left: 10%; margin-top: 10%; } .flex2, .flex3, .flex4 { margin-top: 5%; /* Регулируйте значение, чтобы настроить отступы по вашему усмотрению */ } .png{ margin-right: 2%; }
Дополнительно:
Размер div-а начинает превышать нужный, но при этом он остается как надо(то есть все что должно быть видно - видно), но если уменьшить размер, появляется не нужные части.
Вот эту часть было бы неплохо переформулировать на нормальном языке. Нифига же непонятно.
Ну или картинку приложить с описанием "неправильного" поведения.
ЗЫ
col в col непосредствено не вкладывают. всегда должно быть .row > .col
Ответы:
Чет прям какой то трэш с html и css )))
.container-fluid .row { margin-left: -5%; } .img-fluid { padding-left: 50%; /* Отступы в процентах */ max-width: 200%; /* Максимальная ширина 100% */ max-height: auto; /* Максимальная высота автоматически */ left: 0; width: 200%; height: 600px; ... |
.container-fluid .row { margin-left: -5%; } .img-fluid { padding-left: 50%; /* Отступы в процентах */ max-width: 200%; /* Максимальная ширина 100% */ max-height: auto; /* Максимальная высота автоматически */ left: 0; width: 200%; height: 600px; ...
- это вас кто так научил?)))
<div class="col-md-6"> <div class="col-12"> <div class="img-fluid" alt="Image"></div> </div> </div> |
<div class="col-md-6"> <div class="col-12"> <div class="img-fluid" alt="Image"></div> </div> </div>
- col в col обычно не вкладывают (надо .row > .col)
В общем либо у вас учителя прям печальные, либо верстка это не ваше)
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы изменить размер div в Bootstrap, необходимо использовать классы grid системы, которая предоставляет удобные способы управления шириной элементов на странице. Однако, иногда возникают проблемы с корректным отображением изменений размера div из-за неправильного использования классов или наличия других стилей, которые могут перекрывать стили Bootstrap.
Вот несколько шагов, которые могут помочь в решении проблемы с изменением размера div в Bootstrap:
1. Убедитесь, что вы правильно используете классы grid системы Bootstrap для определения ширины div. Например, для создания div с шириной 50% на всех устройствах можно использовать классы `col-md-6 col-sm-6 col-xs-6`.
2. Проверьте, нет ли других CSS стилей, которые могут перекрывать стили Bootstrap. Иногда стили из других файлов или встроенные стили могут изменять внешний вид элементов на странице.
3. Используйте инструменты разработчика браузера для анализа стилей элемента и выявления возможных конфликтов стилей. Может быть, какие-то стили переопределяют стандартные стили Bootstrap.
4. Попробуйте добавить `!important` к вашим стилям, чтобы убедиться, что они имеют более высокий приоритет перед другими стилями. Например:
<div class="col-md-6 col-sm-6 col-xs-6" style="width: 50% !important"> <!-- Содержимое вашего div --> </div>
5. Если проблема все еще не решена, попробуйте использовать инлайновые стили для установки ширины div. Например:
<div style="width: 50%"> <!-- Содержимое вашего div --> </div>
Следуя этим шагам, вы должны быть способны решить проблему с изменением размера div в Bootstrap. Если у вас все еще возникают трудности, пожалуйста, уточните более подробную информацию о проблеме, чтобы мы могли предложить более точное решение.