#html #css #bootstrap-5
Вопрос:
Я много раз пытался решить эту проблему, но так и не понял, почему, и список не был в одной строке
вот мой код, который я пытался использовать display: inline-block; , и padding: 0 и все еще не решает проблему
/* added by editor for demonstration purpose */ body { background-color: red !important; } lt;!-- Bootstrap-5 --gt; lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"gt; lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"gt;lt;/scriptgt; lt;!-- Body --gt; lt;section id="title"gt; lt;!-- Nav Bar --gt; lt;div class="continer-fluid"gt; lt;nav class="navbar1 navbar-expand-lg navbar-dark "gt; lt;a class="navbar-brand" href=""gt;TinDoglt;/agt; lt;button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-contactrols="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"gt; lt;span class="navbar-toggler-icon"gt;lt;/spangt; lt;/buttongt; lt;div class="collapse navbar-collapse" id="navbarSupportedContent"gt; lt;ul class="navbar-nav ms-auto"gt; lt;li class="nav-item"gt; lt;a class="nav-link" href=""gt;Contactlt;/agt; lt;/ligt; lt;li class="nav-item"gt; lt;a class="nav-link" href=""gt;Pricinglt;/agt; lt;/ligt; lt;li class="nav-item"gt; lt;a class="nav-link" href=""gt;Downloadlt;/agt; lt;/ligt; lt;/ulgt; lt;/divgt; lt;/navgt; lt;!-- Title --gt; lt;div class="row"gt; lt;div class="col-lg-6"gt; lt;h1 class="h11"gt;Meet new and interesting dogs nearby.lt;/h1gt; lt;button type="button" class="btn btn-dark btn-lg DB"gt;lt;i class="fab fa-apple"gt;lt;/igt; Downloadlt;/buttongt; lt;button type="button" class="btn btn-outline-light btn-lg DB"gt;lt;i class="fab fa-google-play"gt;lt;/igt; Downloadlt;/buttongt; lt;/divgt; lt;div class="col-lg-6"gt; lt;img class="images" margin='right' src="images/iphone6.png" alt="iphone-mockup"gt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/sectiongt; 
Ответ №1:
Просто используйте этот CSS.
.continer-fluid .navbar1{ display: flex; } Комментарии:
1. спасибо за его работу , наконец, не могли бы вы дать мне краткое объяснение
2. просто флекс сделал свою работу!
3. добро пожаловать, брат…! У вас есть два элемента внутри div». navbar1″. один — «a» , а другой-div с идентификатором «navbarSupportedContent». Оба этих элемента должны занимать свое собственное пространство и так, чтобы сначала появлялось «а», а затем div. В этой ситуации display: flex позволяет автоматически размещать их оба в качестве адаптивных элементов в контейнере в зависимости от размера экрана.