Question

我正在尝试建立一个网站。我成功地做了很多事情，没有太多麻烦。但是，当前我想稍微改变一下设计，但是Bootstrap Grid无法正常运行。我基本上有一个轮播，然后是一个容器，然后是一行，其中包含树列。

最初，轮播前有一个水平导航栏。之所以删除它是因为我现在决定在页面的左侧（空白处）有一个按钮。用户将单击按钮，导航栏（垂直）将从左侧滑动。再次单击该按钮将再次关闭它。我的问题是，每当我在容器中插入此导航栏的代码时，它就会弄乱我的主要列。如果我将其添加为列，则其余三列会自行重新调整，最后一行会在下面。如果我将代码添加到容器内或其外部任何地方的行中，则会在轮播和容器之间留下多余的空白。另外，我希望按钮和导航栏都可滚动。它们应该与鼠标滚轮一起滚动，或者在用户向下滚动页面并再次向上滚动时滚动。即使添加了与Bootstrap按钮一样小的东西，它也弄乱了整个事情。

我想保留右侧的空白，以便以后可以在必要时在其中添加组件。我已经尝试了本该解决的问题，但还没有解决。因此，如果有人能够找出问题并帮助解决问题，我将不胜感激。

谢谢。

图片1与我的计划相似。图2是我添加按钮时发生的情况。这三个按钮在容器外部。它们在轮播和容器之间创造了额外的空间。容器内的一个按钮弄乱了列。

编辑： 我已经缩短了代码，并在此处添加了代码段。它只能在宽度为1200px以上的浏览器上正常工作。

@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>

Answer 1

这怎么样... 将此添加到您的CSS

h3 {
  margin: 1rem 0;
}

#myRow1 {
  position: relative;
  background-color: black;
}

#arrow {
  position: absolute;
  left: -10rem; 
  top: 50%;
  width: 5rem;
  height: 5rem;
}

然后将其添加到<div id="myRow1" class="row">...</div>内的HTML中

<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>

自举网格容器不断调整

1 个答案: