Блог

Я пытаюсь создать небольшой информационный веб-сайт, используя boostrap, просто чтобы ознакомиться с ним. Все работало нормально, пока я не понял, что в нижней части экрана на всех моих страницах есть горизонтальная полоса прокрутки, и, что бы я ни пытался, кажется, что с правой стороны всегда присутствует небольшой пробел. Я разместил свои элементы в DIV, используя класс container-fluid. Я переопределил класс container-fluid и сделал левое и правое отступы 0 пикселей, а также поля. Поэтому я вернулся к самому голому скелету страницы, не более чем навигационной панели и нескольким строкам и столбцам с несколькими дивами с красной каймой. Я прочитал несколько подобных вопросов и попробовал все их советы, но ничего не работает. Кто-нибудь может сказать мне, чего мне здесь не хватает? Ниже приведен скелетный HTML, который я использую, и соответствующий CSS:

HTML:

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt;  lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;meta http-equiv="X-UA-Compatible" content="ie=edge"gt; lt;titlegt;Black Lotus Designslt;/titlegt;   lt;!--Fontawesome Icons--gt;  lt;script src="https://use.fontawesome.com/e07888a3dd.js"gt;lt;/scriptgt;   lt;!--CSS--gt;  lt;link rel="stylesheet" href="./bootstrap-5.0.2-dist/css/bootstrap.css"gt;  lt;link rel="stylesheet" href="./Javascript/jquery-ui-1.13.0/jquery-ui.css"gt;      lt;!--JQuery--gt;  lt;script type="text/javascript" src="./Javascript/jquery-3.6.0.js"gt;lt;/scriptgt;  lt;!--Jquery UI--gt;  lt;script type="text/javascript" src="./Javascript/jquery-ui-1.13.0/jquery-ui.min.js"gt;lt;/scriptgt;  lt;!--animate.css--gt;    lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css"/gt;    lt;!--Textillate File--gt;  lt;script type="text/javascript" src="./Javascript/jquery.lettering.js"gt;lt;/scriptgt;  lt;script type="text/javascript" src="./Javascript/jquery.textillate.js"gt;lt;/scriptgt;    lt;!-- Google Fonts--gt;  lt;!--Spectral--gt;  lt;link rel="preconnect" href="https://fonts.googleapis.com"gt;  lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigingt;  lt;link href="https://fonts.googleapis.com/css2?family=Spectralamp;display=swap" rel="stylesheet"gt;    lt;!--Oswald--gt;  lt;link rel="preconnect" href="https://fonts.googleapis.com"gt;  lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigingt;  lt;link href="https://fonts.googleapis.com/css2?family=Brawleramp;family=Caladeaamp;family=Oswald:wght@300amp;family=Poppins:wght@100;200amp;family=Roboto:wght@300amp;family=Spectralamp;display=swap" rel="stylesheet"gt;   lt;!-- Brawler--gt;  lt;link rel="preconnect" href="https://fonts.googleapis.com"gt;  lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigingt;  lt;link href="https://fonts.googleapis.com/css2?family=Brawleramp;family=Caladeaamp;family=Poppins:wght@100;200amp;family=Roboto:wght@300amp;family=Spectralamp;display=swap" rel="stylesheet"gt;   lt;!-- --gt;     lt;!--bootstrap javascript file--gt;  lt;script src="./bootstrap-5.0.2-dist/js/bootstrap.min.js"gt;lt;/scriptgt;   lt;!--custom css file--gt;  lt;link rel="stylesheet" href="./CSS/globals.css"gt;  lt;link rel="stylesheet" href="./CSS/about.css"gt;  lt;!--BOOTSTRAP OVERRIDES--gt;  lt;stylegt;    lt;/stylegt;   lt;!--Custom Text Effects File--gt;  lt;!--lt;script type="text/javascript" src="./Javascript/textEffects.js"gt;lt;/scriptgt;--gt; lt;/headgt;  lt;headergt;  lt;!--Navbar Region--gt;  lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark"gt;  lt;div class="container-fluid"gt;  lt;a class="navbar-brand" href="#"gt;lt;img src="./Images/tabIcon.png"gt;lt;/agt;  lt;button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="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 me-auto mb-2 mb-lg-0"gt;  lt;li class="nav-item"gt;  lt;a class="nav-link" href="./index.html"gt;Homelt;/agt;  lt;/ligt;  lt;li class="nav-item dropdown"gt;  lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="link" data-bs-toggle="dropdown" aria-expanded="false"gt;  Services  lt;/agt;  lt;ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="background:black;color:white;"gt;  lt;ligt;lt;a class="dropdown-item ddMenu_Color active" aria-current="page" href="./services.html"gt;Serviceslt;/agt;lt;/ligt;  lt;ligt;lt;a class="dropdown-item ddMenu_Color" href="#"gt;Typographic Elementslt;/agt;lt;/ligt;  lt;ligt;lt;hr class="dropdown-divider"gt;lt;/ligt;  lt;ligt;lt;a class="dropdown-item ddMenu_Color" href="#"gt;Basic Animationslt;/agt;lt;/ligt;  lt;/ulgt;  lt;/ligt;  lt;li class="nav-item"gt;  lt;a class="nav-link" href="./portfolio.html"gt;Portfoliolt;/agt;  lt;/ligt;  lt;li class="nav-item"gt;  lt;a class="nav-link" href="./about.html"gt;Aboutlt;/agt;  lt;/ligt;  lt;li class="nav-item"gt;  lt;a class="nav-link" href="./blog.html"gt;Bloglt;/agt;  lt;/ligt;  lt;li class="nav-item"gt;  lt;a class="nav-link" href="./gallery.html"gt;Gallerylt;/agt;  lt;/ligt;  lt;li class="nav-item"gt;  lt;a class="nav-link" href="./contact.html"gt;Contactlt;/agt;  lt;/ligt;  lt;/ulgt;  lt;form class="d-flex"gt;  lt;input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"gt;  lt;button class="btn btn-outline-success" type="submit"gt;Searchlt;/buttongt;  lt;/formgt;  lt;/divgt;  lt;/divgt; lt;/navgt; lt;!--End of Navbar Region --gt; lt;/headergt;  lt;div class="container-fluid"gt;   lt;sectiongt;  lt;div class="row"gt;  lt;div class="col red"gt;lt;/divgt;  lt;div class="col red"gt;lt;/divgt;  lt;div class="col red"gt;lt;/divgt;  lt;/divgt;  lt;div class="row"gt;  lt;div class="col red"gt;lt;/divgt;  lt;div class="col red"gt;lt;/divgt;  lt;div class="col red"gt;lt;/divgt;  lt;/divgt;  lt;div class="row"gt;  lt;div class="col red"gt;lt;/divgt;  lt;div class="col red"gt;lt;/divgt;  lt;div class="col red"gt;lt;/divgt;  lt;/divgt;  lt;/sectiongt;  lt;/divgt; lt;/htmlgt;   

CSS:

 .red {  border: 2px solid red;  width:150px;  height:150px; } .container-fluid {  padding-left: 0px !important;  padding-right: 0px !important;  margin: 0px !important;  }  

Спасибо вам в advance….it это было так неприятно, и я предполагаю, что это что-то очень простое, что я упускаю из виду. Это всегда самая очевидная вещь, которая меня заводит. Вот снимок экрана—если есть лучшее решение, чем скрывать вещи, пожалуйста, дайте мне знать , введите описание изображения здесь

Я, вероятно, испортил что-то еще, сделав это, но я попытался использовать overflow:hidden, и это сработало! У меня такое чувство, что это вернется, чтобы укусить меня somewhere…so если кто-нибудь знает лучший способ … разве весь смысл бутстрэпа не в том, чтобы все упростить?