我的问题很简单。我正在使用Bootstrap 4.0来建立一个网站。我有一个Carousel元素，我的Container开始在其下面。 Container包含两个Rows，一个用于Footer，另一个用于容纳我的内容的Columns。我试图将三列并排排列（就像实际的列一样）。每列包含一个DIV元素（Bootstrap Column Class）;下面有一个图像和文字图像。当我在index.html文件中设置图像的大小属性时，这很好。但是，一旦我将相同的信息复制到我的自定义CSS文件中，列就会堆叠起来。我很确定我用CSS中的正确语法调用图像。但它只是不起作用。我附上截图，以了解我打算做什么以及实际发生了什么。
任何形式的帮助都将受到高度赞赏。
谢谢。
HTML CODE：
<!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 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel = "stylesheet" href="custom.css">
<title>AlphaGamigLeague</title>
</head>
<body>
<nav class="navbar nav-pills">
<a class="navbar-brand" href="#">
<img src="https://drive.google.com/uc?export=download&id=1G0450PwU5dcfQ9g4lRuZjl6C8MP8ZNbh" width="100px" height="100px">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- End Of Navigation Bar -->
<!-- Beginning Of Carousel -->
<div id="mycarousel" 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=download&id=1G0450PwU5dcfQ9g4lRuZjl6C8MP8ZNbh" height="650px" width="400px" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://drive.google.com/uc?export=download&id=1Rq95g-w1Dpr-pq9vuI4p9bVV2hHPHiIw" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://drive.google.com/uc?export=download&id=1G0450PwU5dcfQ9g4lRuZjl6C8MP8ZNbh" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#mycarousel" 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="#mycarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- End Of Carousel -->
<!-- Beginning Of Container -->
<br>
<br>
<!-- Beginning Of Main Content -->
<!-- Bootstrap Container Begins Here -->
<div class="container">
<!-- First Row Begins Here -->
<div id = "myRow1" class="row">
<!-- First Column Begins Here -->
<div id = "whoarewe" class="col-md">
<br>
<h3>
Who Are We?
</h3>
<br>
<img id = "myfirstImage" src= "https://drive.google.com/uc?export=download&id=1TXd3BvbLa9kFb4N9bq4P8KY_cDx1flSF"class= "hover" width = "350px" height= "400px">
<p class= "fsfwt48t948489tugjwj4h9u4 ubuw ughwu9 g">
</p>
<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 = "myRow1Column2" class="col-md">
<br>
<h3>
Our Tournaments
</h3>
<br>
<img id = "mysecondImage" src= "https://drive.google.com/uc?export=download&id=1apY_1ssrqv9u1SRCiQoZOJG4DoFho87H" width = "350px" height= "400px">
<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 = "myRow1Column3" class="col-md">
<br>
<h3>
Partnerships
</h3>
<br>
<img id ="mythirdImage" src= "https://drive.google.com/uc?export=download&id=1X0J3m9a8V5gOVu5WX1VwBQMMPWar4H7q" width = "350px" height= "400px">
<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. You can "Click Here" to send us a query and get in-touch with us.
</p>
</div>
<!-- Third Column Ends Here -->
</div>
<!-- First Row Ends Here -->
<!-- Footer Begins Here -->
<!-- Second Row Begins Here -->
<div id = "myRow2" class="row">
<!-- First Column Begins Here -->
<div id = "myRow2Column1" class="col-md">
sdasdasdasdasdasda
<br>
<!-- Disclaimer DIV Begins Here -->
<div id = "disclaimer">
<p>
All rights reserved. No fhsofsei fhioyw39847 ryo8wrt 48wotr o3qwryy 9aw4ro87
</p>
</div>
<!-- Disclaimer DIV Ends Here -->
</div>
<!-- First Column Ends Here -->
<!-- Second Columns Begins Here -->
<div id = "myRow2Column2" class="col-md">
<br>
<!-- Instagram Icon DIV Begins Here -->
<div id = "instagram">
<img src= "https://drive.google.com/uc?export=download&id=1jiCKayOmqF5hk1FDrF9wAfiG2VYlHoki" width= "50px" height = "50px" align = "right">
</div>
<!-- Instagram Icon DIV Ends Here -->
<!-- Twitter Icon DIV Beginss Here -->
<div id = "twitter">
<img src= "https://drive.google.com/uc?export=download&id=1JhT0U6SXfrZ8jyKOUhbZoEs7kpQ7bdXp" height= "50px" width= "50px" align = "right">
</div>
<!-- Twitter Icon DIV Ends Here -->
<!-- Facebook Icon DIV Begins Here -->
<div id = "facebook">
<img src= "https://drive.google.com/uc?export=download&id=1ZGjOfBJHrzCrXeP3hoc2FsgCLFX41sq2" height= "50px" width= "50px" align = "right">
</div>
<!-- Facebook Icon DIV Ends Here -->
</div>
<!-- Second Column Ends Here -->
</div>
<!-- Second Row Ends Here -->
</div>
<!-- Bootstrap Container Ends Here -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
CSS代码：
.logo_image {
height: 200px;
width: 100px;
}
/* .nav-brand allows the logo properties to be changed */
.navbar-brand {
}
.navbar{
background-color: black;
}
.navbar-toggler{
background-color: orange;
border-radius: 8px;
}
.navbar navbar-expand-lg{
background-color: aqua;
}
.collapse{
background-color: aqua;
}
.btn{
background-color: whitesmoke;
}
.body{
background-color: black:
}
.carousel-inner{
height: 650px;
}
.carousel-item active{
height: 90px;
}
.item active{
height: 50px;
}
#myRow1{
background-color: pink;
height:auto;
width: auto;
}
#whoarewe{
text-align: center;
height: auto;
font-family: monospace;
font-weight: 900;
font-size: 15px;
}
#myRow1Column2{
text-align: center;
height: auto;
font-family: monospace;
font-weight: 900;
font-size: 15px;
}
#myRow2{
background-color: forestgreen;
height:auto;
}
#myRow1Column3{
text-align: center;
height: auto;
font-family: monospace;
font-weight: 900;
font-size: 15px;
}
#disclaimer{
width: 300px;
text-align: left;
}
#socialMediaLinks{
position: relative;
bottom: 30px;
}
#myRow2Column2{
margin-right: 40px;
margin-left: 100px;
}
#instagram{
position: relative;
right: 20px;
}
#twitter{
position: relative;
right: 40px;
}
#facebook{
position: relative;
right: 60px;
}
#myfirstImage{
width = 150px;
height= 400px;
}
#mysecondImage{
width = 350px;
height= 400px;
}
#mythirdImage{
width = 350px;
height= 400px;
}
#firstImage{
}
#secondImage{
}
#thirdImage{
}
#secondImage:hover{
opacity: 0.6;
visibility: visible;
}
Intended Layout. Works when image size dimensions are specified in index.html.
Actual layout. When image size dimensions are removed from index.html and added to the CSS file.
答案 0 :(得分：0)
从图像中删除修复宽度，并将img-fluid类添加到它们中。
我的意思是，当你在图像上设置固定宽度时，你到底会发生什么？无论如何，第一步是删除修复宽度，然后，为了使图像响应，您添加img-fluid类。
这是工作代码段：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Bootstrap Container Begins Here -->
<div class="container">
<!-- First Row Begins Here -->
<div id = "myRow1" class="row">
<!-- First Column Begins Here -->
<div id = "whoarewe" class="col-md">
<br>
<h3>
Who Are We?
</h3>
<br>
<img class="img-fluid" id = "myfirstImage" src= "https://drive.google.com/uc?export=download&id=1TXd3BvbLa9kFb4N9bq4P8KY_cDx1flSF"class= "hover">
<p class= "fsfwt48t948489tugjwj4h9u4 ubuw ughwu9 g">
</p>
<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 = "myRow1Column2" class="col-md">
<br>
<h3>
Our Tournaments
</h3>
<br>
<img class="img-fluid" id = "mysecondImage" src= "https://drive.google.com/uc?export=download&id=1apY_1ssrqv9u1SRCiQoZOJG4DoFho87H">
<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 = "myRow1Column3" class="col-md">
<br>
<h3>
Partnerships
</h3>
<br>
<img class="img-fluid" id ="mythirdImage" src= "https://drive.google.com/uc?export=download&id=1X0J3m9a8V5gOVu5WX1VwBQMMPWar4H7q">
<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. You can "Click Here" to send us a query and get in-touch with us.
</p>
</div>
<!-- Third Column Ends Here -->
</div>
<!-- First Row Ends Here -->
</div>