#html #css #web #bootstrap-4
Вопрос:
Я использую bootstrap и хотел бы, чтобы элементы располагались рядом друг с другом, до сих пор я пытался использовать столбцы начальной загрузки, но, похоже, это не работает, возможно, я неправильно пишу свой код
lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous"gt; lt;div class="container"gt; lt;div class="row"gt; lt;div class="col"gt; lt;h6gt; We've funded 120,000 charity projects for 20M people around the world. lt;/h6gt; lt;h6gt; Clean Water lt;/h6gt; lt;i class="fas fa-tint"gt;lt;/igt; lt;pgt; 633 million people drink dirty water. With your help we supply clean water which can improve health lt;/pgt; lt;h6gt;Healthy foodlt;/h6gt; lt;i class="fas fa-seedling"gt;lt;/igt; lt;pgt; With your help we have provided good healthy food to the less fortunate. lt;/pgt; lt;h6gt; Education lt;/h6gt; lt;i class="fas fa-book"gt;lt;/igt; lt;pgt;We have developed schools with the donations received, so children can have access to good educationlt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; 
На приведенном выше изображении я хотел бы, чтобы дизайн выглядел именно так
Пожалуйста, помогите, так как это становится действительно неприятным.
Комментарии:
1. Вы поместили весь свой контент в одну колонку. Почему вы ожидали увидеть несколько?
Ответ №1:
Вам нужно добавить col класс с div каждым столбцом
lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"gt; lt;div class="container"gt; lt;div class="row"gt; lt;div class="col-12"gt; lt;h6gt; We've funded 120,000 charity projects for 20M people around the world. lt;/h6gt; lt;/divgt; lt;div class="col"gt; lt;h6gt; Clean Water lt;/h6gt; lt;i class="fas fa-tint"gt;lt;/igt; lt;pgt; 633 million people drink dirty water. With your help we supply clean water which can improve health lt;/pgt; lt;/divgt; lt;div class="col"gt; lt;h6gt;Healthy foodlt;/h6gt; lt;i class="fas fa-seedling"gt;lt;/igt; lt;pgt; With your help we have provided good healthy food to the less fortunate. lt;/pgt; lt;/divgt; lt;div class="col"gt; lt;h6gt; Education lt;/h6gt; lt;i class="fas fa-book"gt;lt;/igt; lt;pgt;We have developed schools with the donations received, so children can have access to good educationlt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; Ответ №2:
Я думаю, вы ищете это.
Элементы выровнены по вертикали, когда ширина браузера меньше 767 пикселей.
lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"gt; lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ 1lW4y57PTFmhCaXp0ML5d60M1M7uH2 nqUivzIebhndOJK28anvf" crossorigin="anonymous"gt; lt;div class="container"gt; lt;h6gt; We've funded 120,000 charity projects for 20M people around the world. lt;/h6gt; lt;div class="row mt-5"gt; lt;div class="col-12 col-md-4 mb-2 mb-md-0"gt; lt;h6gt; Clean Water lt;/h6gt; lt;i class="fas fa-tint"gt;lt;/igt; lt;pgt; 633 million people drink dirty water. With your help we supply clean water which can improve health lt;/pgt; lt;/divgt; lt;div class="col-12 col-md-4 mb-2 mb-md-0"gt; lt;h6gt;Healthy foodlt;/h6gt; lt;i class="fas fa-seedling"gt;lt;/igt; lt;pgt; With your help we have provided good healthy food to the less fortunate. lt;/pgt; lt;/divgt; lt;div class="col-12 col-md-4 mb-2 mb-md-0"gt; lt;h6gt; Education lt;/h6gt; lt;i class="fas fa-book"gt;lt;/igt; lt;pgt;We have developed schools with the donations received, so children can have access to good educationlt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; Ответ №3:
Я бы подумал об этом так: у вас есть одна строка с 4 столбцами в этой строке. Как указывали другие, вам нужно дать каждому Div код: class="col-3" .
Способ начальной загрузки заключается в наличии 12 столбцов по всей странице, поэтому вы хотели бы, чтобы каждый из ваших столбцов занимал 3 из этих столбцов, поэтому, col-3 если бы вы хотели только 2 столбца, это было бы col-6 и так далее.
Для каждого столбца, который вы хотели бы видеть рядом, он должен быть завернут в следующий код:
lt;div class ="col-3"gt; lt;divgt; Буквы между COL и номером указаны, если вы хотите указать размер экрана, до которого он будет масштабироваться. Если оставить его без внимания, он также будет работать на всех устройствах.
Ответ №4:
lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous"gt; lt;div class="container"gt; lt;div class="row"gt; lt;div class="col-md-3"gt; lt;i class="fas fa-3x fa-code"gt;lt;/igt; lt;divgt; lt;h5 class="py-2"gt;Clean Codelt;/h5gt; lt;pgt;Lorem ipsum dolor sit amet consectetur adipisicing elitlt;/pgt; lt;/divgt; lt;/divgt; lt;div class="col-md-3"gt; lt;divgt; lt;i class="fas fa-3x fa-cogs"gt;lt;/igt; lt;h5 class="py-2"gt;Problem Solvinglt;/h5gt; lt;pgt;Lorem ipsum dolor sit amet consectetur adipisicing elitlt;/pgt; lt;/divgt; lt;/divgt; lt;div class="col-md-3"gt; lt;i class="fas fa-3x fa-globe"gt;lt;/igt; lt;divgt; lt;h5 class="py-2"gt;Best Domainlt;/h5gt; lt;pgt;Lorem ipsum dolor sit amet consectetur adipisicing elitlt;/pgt; lt;/divgt; lt;/divgt; lt;div class="col-md-3"gt; lt;i class="fas fa-3x fa-user-shield"gt;lt;/igt; lt;divgt; lt;h5 class="py-2"gt;Secure Websitelt;/h5gt; lt;pgt;Lorem ipsum dolor sit amet consectetur adipisicing elitlt;/pgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; Комментарии:
1. Ваш ответ должен включать некоторое объяснение ваших изменений.