Div для секции с отзывами неправильно выравнивается с Bootstrap. Как решить эту проблему?
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet"> </head> <body> <section id="otzivi"> <div class="row ms-5 otzivi"> <div class="col-lg-4"> <img src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8d29tYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em"></text></img> <h2>Я в восторге!</h2> <p>Александра - крутой фотограф! Она смогла подарить мне уверенность в себе!</p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> <img src="https://images.unsplash.com/photo-1506956191951-7a88da4435e5?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTh8fHdvbWFufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em"></text></img> <h2>Спасибо!</h2> <p>Мне очень понравилось работать с Александрой. Все было круто!</p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8d29tYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em"></text></img> <h2>Вау!</h2> <p>Когда я увидела фотографии, то не поверила, что это - я.</p> </div><!-- /.col-lg-4 --> </div> </section> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> <script src="app.js"></script> </body> </html> |
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet"> </head> <body> <section id="otzivi"> <div class="row ms-5 otzivi"> <div class="col-lg-4"> <img src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8d29tYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em"></text></img> <h2>Я в восторге!</h2> <p>Александра - крутой фотограф! Она смогла подарить мне уверенность в себе!</p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> <img src="https://images.unsplash.com/photo-1506956191951-7a88da4435e5?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTh8fHdvbWFufGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em"></text></img> <h2>Спасибо!</h2> <p>Мне очень понравилось работать с Александрой. Все было круто!</p> </div><!-- /.col-lg-4 --> <div class="col-lg-4"> <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8d29tYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60" class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#777" dy=".3em"></text></img> <h2>Вау!</h2> <p>Когда я увидела фотографии, то не поверила, что это - я.</p> </div><!-- /.col-lg-4 --> </div> </section> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> <script src="app.js"></script> </body> </html>
- Это желанный результат
Дополнительно:
<div class="col-lg-4 text-center">
- Выложите в песочницу, пожалуйста.Сюда например
- почему-то если сделать в отдельном файле хтмл отзывы, то ваш способ работает, но в общем проекте не получается((
- Значит у вас что-то глобально перебивает стили
- Максим, https://www.codeply.com/p/CBSiF0wHT9
- У вас там закрывающий div пропущен, я поправил)
- Максим, спасибо огромное! вы мне очень помогли
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы правильно выровнять div с отзывами с использованием Bootstrap, вам необходимо использовать правильные классы и структуру разметки. Возможно, проблема заключается в неправильном использовании классов или их отсутствии.
Вот пример кода, который поможет вам решить данную проблему:
<div class="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <div class="reviews"> <!-- Ваш отзыв --> </div> </div> </div> </div><div class="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <div class="reviews"> <!-- Ваш отзыв --> </div> </div> </div> </div>
В данном примере мы используем классы Bootstrap для создания сетки. Класс "container" задает контейнер, в котором будет находиться ваш контент. Класс "row" создает строку в сетке, а классы "col-md-6 offset-md-3" определяют ширину блока с отзывами и его отступ. Вы также можете настроить эти классы в соответствии с вашим дизайном.
Убедитесь, что вы подключили все необходимые файлы Bootstrap к вашему проекту, чтобы классы работали корректно. Также проверьте правильность написания классов и структуру вашего HTML кода.
Если проблема остается, пожалуйста, предоставьте более подробную информацию или код, чтобы мы могли помочь вам более точно.