我正在尝试制作一个网站。我设法毫不费力地做了其中的很大一部分。然而，目前我想稍微改变一下我的设计，但 Bootstrap Grid 没有按应有的方式运行。我基本上有一个旋转木马，然后是一个容器，然后是包含树列的一行。
最初，Carousel 之前有一个水平导航栏。我删除它是因为我现在决定在页面左侧(空白处)放置一个按钮。用户将单击该按钮，导航栏(垂直)将从左侧滑入。再次单击该按钮将再次关闭它。我的问题是每当我在容器中插入此导航栏的代码时，它都会弄乱我的主列。如果我将其添加为一列，则其余三列会自行重新调整，最后一列在下方。如果我将代码添加到容器内的行中或容器外的任何位置，它会在 Carousel 和容器之间留下额外的空白。另外，我希望按钮和导航栏都可以滚动。它们应该与鼠标滚轮一起滚动，或者当用户向下滚动页面并再次返回时。即使添加像 Bootstrap 按钮这样小的东西，也会把整个事情搞砸。
我想保留右侧的空白区域，以便稍后在必要时可以在此处添加组件。我已经尝试了我能做的，但还没有解决这个问题。因此，如果有人能找出问题并帮助解决问题，我将不胜感激。
谢谢。
图1和我计划的差不多。 图 2 是我添加按钮时发生的情况。三个按钮在容器的外面。他们在 Carousel 和容器之间创造了额外的空间。容器内的一个按钮弄乱了列。
编辑: 我已经缩短了代码并在此处添加了代码片段。它只能在 1200 像素及以上的浏览器宽度上正常工作。
@media only screen and (min-width: 1200px){
.body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.logo_image {
height: 200px;
width: 100px;
}
/* .nav-brand allows the logo properties to be changed */
.navbar-brand {
}
.navbar{
background-color: teal;
}
.collapse{
background-color: #151515;
}
.navbar-collapse{
border-style: solid;
border-color: fuchsia;
}
.mr-auto{
background-color: #151515;
}
.navbar-nav{
background-color: #151515;
}
.navbarSupportedContent{
background-color: #151515;
}
.btn{
background-color: whitesmoke;
}
.body{
background-color: black;
}
.carousel-inner{
height: 650px;
}
.carousel-item active{
height: 90px;
}
.item active{
height: 50px;
}
#myRow1{
background-color:;
height:auto;
width: auto;
}
#whoarewe{
text-align: center;
height: auto;
font-family: 'Exo', sans-serif;
font-weight: 900;
font-size: 18px;
color: #f9f9f9;
margin-left: auto;
margin-right: auto;
background-color: #062c4b;
}
#ourtournaments{
text-align: center;
height: auto;
font-family: 'Exo', sans-serif;
font-weight: 900;
font-size: 18px;
color: #f9f9f9;
}
#footer{
background-color:;
height:auto;
color: #f9f9f9;
}
#partnerships{
text-align: center;
height: auto;
font-family: 'Exo', sans-serif;
font-weight: 900;
font-size: 18px;
color: #f9f9f9;
background-color: #062c4b;
}
#disclaimer{
width: 300px;
text-align: left;
font-size: 11px;
font-family: 'Fira Sans Extra Condensed', sans-serif;
}
#socialMedia{
margin-left: auto;
margin-right: auto;
text-align: right;
}
hr {
display: block;
position: relative;
padding: 0;
margin: 8px auto;
height: 0;
width: 100%;
max-height: 0;
font-size: 1px;
line-height: 0;
clear: both;
border: none;
border-top: 1px solid #aaaaaa;
border-bottom: 1px solid #ffffff;
}
#mainContainer{
background-color: #151515;
}
#mainContainer2{
background-color: #151515;
}
.material-icons.md-18 {
font-size: 18px;
}
.material-icons.md-24 {
font-size: 24px;
}
.material-icons.md-36 {
font-size: 36px;
}
.material-icons.md-48 {
font-size: 48px;
}
.material-icons.md-72 {
font-size: 72px;
}
.material-icons.md-108 {
font-size: 108px;
}
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- Custom CSS -->
<link rel = "stylesheet" href="custom.css">
<!-- Google Material Design And Google Fonts CDN -->
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Extra+Condensed" rel="stylesheet">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<title>AlphaGamigLeague</title>
</head>
<body>
<!-- End Of Navigation Bar -->
<!-- Beginning Of Carousel -->
<!-- New Carousel -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src= "https://drive.google.com/uc?export=view&id=1aQjbXQ_zxZRUASYuh9IQ2p1fA8V-LBmx" height="650px" width="400px" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>bababa</h5>
<p>aabababab</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src= "https://drive.google.com/uc?export=view&id=1aQjbXQ_zxZRUASYuh9IQ2p1fA8V-LBmx" height="650px" alt="Second slide" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>o06nb53o6mb39p56yhmb356</h5>
<p>aabababab</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src= "https://drive.google.com/uc?export=view&id=1aQjbXQ_zxZRUASYuh9IQ2p1fA8V-LBmx" height="650px" alt="Third slide" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>bababa</h5>
<p>aabababab</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- END -->
<!-- Beginning Of Container -->
<br>
<br>
<!-- Beginning Of Main Content -->
<!-- Bootstrap Container Begins Here -->
<div id ="mainContainer" class="container">
<!-- First Row Begins Here -->
<div id = "myRow1" class="row">
<!-- First Column Begins Here -->
<div id = "whoarewe" class="col-md-4">
<br>
<h3>
Who Are We?
</h3>
<br>
<img class = "img-fluid" id = "myfirstImage" src= "https://drive.google.com/uc?export=download&id=1DDkg4JFU0zAc8QIklyad-Es1mC1OvFfw">
<br>
<br>
<p>
Alpha Gaming League, also known as AGL eSports, is a professional eSports organization. We aim to not only provide a platform for Pakistani gaming and eSports enthusiants to showcase their talent but also benefit in numerous ways; especially financially. Our goal is to be the very best in the business. We don't just want to be known as one of the key pioneers of the eSports industry in the country but want ot be known as the pioneers of the eSports industry that continue to raise the bar and set new standards in terms of eSports in Pakistan. The be the ultimate leader and lead by example is what AGL eSports thrives to be.
</p>
</div>
<!-- First Column Begins Here -->
<!-- Second Column Begins Here -->
<div id = "ourtournaments" class="col-md-4">
<br>
<h3>
Tournaments
</h3>
<br>
<img class = "img-fluid" id = "mysecondImage" src= "https://drive.google.com/uc?export=download&id=1apY_1ssrqv9u1SRCiQoZOJG4DoFho87H">
<br>
<br>
<p>
Alpha Gaming League(AGL eSports) holds a variety of tournaments every year. We are able to successfully do this based on years of knowledge and experience in the field. Some of the titles for which competitions and tournaments are held. include:
<br>
<br>
Battlefield (Console + PC)
<br>
Blur (Console)
<br>
Call Of Duty (Console + PC)
<br>
Counter Strike(PC)
<br>
DoTA2 (PC)
<br>
FIFA (Console)
<br>
Fortnite (Consile + PC)
<br>
Player Unknown's Battle Grounds (Console + PC)
<br>
Tekken (Console)
<br>
etc...
<br>
<br>
These titles are just a few of the many we have to offer.
Not only this, but players at our competitions are guaranteed to win exciting prozes, which includes prize money, goodi bags and much more.
</p>
</div>
<!-- Second Column Ends Here -->
<!-- Third Column Begins Here -->
<div id = "partnerships" class="col-md-4">
<br>
<h3>
Partnerships
</h3>
<br>
<img class = "img-fluid" id = "mythirdImage" src= "https://drive.google.com/uc?export=download&id=1X0J3m9a8V5gOVu5WX1VwBQMMPWar4H7q" >
<br>
<br>
<p>
At alpha Gaming League, we believe in the power of unity and working together as a team. It is only by working together that positive results can be achieved. We are always on the lookout for individuals or groups of individuals that have something exiting and unique to bring to the table. Because let's face it, in today's world, only unique ideas survive. If you or your organization thinks it has what it takes to fulfill our expectations and is interested in working alongside us, don't hesitate to get in touch with us.
</p>
<br>
<br>
<br>
<i class="material-icons md-108">
contact_support
</i>
</div>
<!-- Third Column Ends Here -->
</div>
<!-- First Row Ends Here -->
<!-- Footer Begins Here -->
<!-- Second Row Begins Here -->
<div id = "footer" class="row">
<!-- First Column Begins Here -->
<div id = "myRow2Column1" class="col-md-6">
<!-- Disclaimer DIV Begins Here -->
<div id = "disclaimer">
<p>
<br>
All rights reserved. No part of this website must be copied and/or reproduced without prioir written permission from the owner.
<br>
<br>
The Alpha Gaming League, AGL eSports, AGL Fantasy League, PCON Games and all other visible logos are registered trademarks of their respective owners.
</p>
</div>
<!-- Disclaimer DIV Ends Here -->
</div>
<!-- First Column Ends Here -->
<!-- Second Columns Begins Here -->
<div id = "socialMedia" class="col-md-6">
<br>
<!-- Facebook Icon DIV Begins Here -->
<i class="fab fa-facebook-square fa-5x" style="color: dodgerblue" href = "https://www.facebook.com/aglesports">
</i>
<!-- Facebook Icon DIV Ends Here -->
<!-- Twitter Icon DIV Begins Here -->
<i class="fab fa-twitter-square fa-5x" style="color: dodgerblue">
</i>
<!-- Instagram Icon DIV Begins Here -->
<i class="fab fa-instagram fa-5x" style="color: dodgerblue">
</i>
<!-- Instagram Icon DIV Ends Here -->
<!-- Twitter Icon DIV Ends Here -->
</div>
<!-- Second Column Ends Here -->
</div>
<!-- Second Row Ends Here -->
</div>
<!-- Bootstrap Container Ends Here -->
</body>
</html>最佳答案
这个怎么样... 将此添加到您的 CSS
h3 {
margin: 1rem 0;
}
#myRow1 {
position: relative;
background-color: black;
}
#arrow {
position: absolute;
left: -10rem;
top: 50%;
width: 5rem;
height: 5rem;
}
然后将其添加到您的 HTML 中，在 <div id="myRow1" class="row">...</div> 中
<div id="arrow">
<svg viewBox="0 0 32 32">
<path d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16c8.8,0,16-7.2,16-16S24.8,0,16,0z M25.1,17.1l-6,6c-0.3,0.3-0.7,0.4-1.1,0.4
c-0.4,0-0.8-0.1-1.1-0.4c-0.6-0.6-0.6-1.5,0-2.1l3.4-3.4H8c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5h12.4l-3.4-3.4
c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l6,6C25.6,15.5,25.6,16.5,25.1,17.1z"/>
</svg>
</div>
关于html - Bootstrap 网格容器不断调整，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51558118/