Bootstrap 3映像對齊問題
[英]Bootstrap 3 images alignment issues
問題描述
美好的一天，這里的問題很小，我似乎無法將所有三個圖像放在同一行中，有人可以幫助解決該問題嗎？ 第一個成行，然后第二個和第三個相互重疊。 我已經使用了bootstrap的12列網格，但是其他2列一直在下降。 另外，是否有引導程序代碼可將圖像調整到該行？ 感謝您的閱讀。
這是一個js小提琴鏈接： https : //jsfiddle.net/wxofr2ae/5/
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Homepage</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="img/link_health.jpg" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="img/link_wellness.jpg" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
</body>
</html>
CSS:
@media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 300px;
height: 300px;
}
3 個解決方案
解決方案1
2 已采納 2018-09-24 04:03:37
好的！ 我只需執行3個步驟即可解決您的問題：
步驟1：為BEAUTY塊的<div class="box">添加結束標記。
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you forgot this closing tag -->
步驟2：刪除<div class="container">塊的冗余</div>標記
步驟3：更改CSS類，將width: 100% ，此步驟將解決圖像重疊問題：
.bhw_link {
width: 100%;
height: 300px;
}
解決方案2
1 2018-09-24 03:59:30
您錯過了關閉div <div class="box">並更改CSS的
.bhw_link {
width: 100%;
height: auto;
}
@media only screen and (max-width : 767px) { .box { height: auto !important; } } .bhw_link { width: 100%; height: auto; }
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <header> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">MWC</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </nav> </header> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="box"> <h2>BEAUTY</h2> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link"></div> </div> <div class="col-sm-4"> <div class="box"> <h2>HEALTH</h2> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link"> </div> </div> <div class="col-sm-4"> <div class="box"> <h2>WELLNESS</h2> <img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link"> </div> </div> </div> </div> </div> <div class="legend"> <span class="key-container">.container</span> <span class="key-row">.row</span> <span class="key-col">.col-*</span> <span class="key-box">.box (custom)</span> </div>
解決方案3
1 2018-09-24 04:01:51
只是因為您省略了結束標簽
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you omitted this closing tag-->
</div>
如果要將圖像縮放到父元素或將其設置為寬度100％，請嘗試為圖像標簽使用“ img響應”類，因為該圖像已位於bootstrap的網格系統內
Twitter引導程序對齊問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.