时间戳

首页 > 解决方案 > Bootstrap Grid Container 不断调整

html - Bootstrap Grid Container 不断调整

问题描述

我正在尝试做一个网站。我已经成功地制作了相当大的一部分，没有太多麻烦。但是，目前我想稍微改变我的设计，但 Bootstrap Grid 并没有按应有的方式运行。我基本上有一个轮播，然后是一个容器，然后是包含树列的一行。

最初，Carousel 之前有一个水平导航栏。我删除它是因为我现在决定在页面左侧（在空白处）有一个按钮。用户将单击按钮，导航栏（垂直）将从左侧滑入。再次单击该按钮将再次关闭它。我的问题是每当我在容器中插入此导航栏的代码时，它都会弄乱我的主列。如果我将其添加为列，则其余三列会自行调整，最后一列位于下方。如果我在容器内或容器外的任何地方添加代码，它会在轮播和容器之间留下额外的空白。另外，我希望按钮和导航栏都是可滚动的。它们应该随着鼠标滚轮滚动，或者当用户向下滚动页面并再次返回时滚动。

我想保留右侧的空白区域，以便稍后在必要时添加组件。我已经尝试了我可以拥有的东西，但还没有解决这个问题。因此，如果有人能找出问题并帮助解决它，我将不胜感激。

谢谢。

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

这与我的计划相似

这就是正在发生的事情。 这三个按钮位于容器外部。 他们在 Carousel 和容器之间创造了额外的空间。 容器内的一个按钮弄乱了列。

编辑： 我缩短了代码并在此处添加了代码段。它只能在 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>

标签： htmlcsstwitter-bootstrapgrid-layout

解决方案

这个怎么样......将它添加到你的 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>

推荐阅读