Bootstrap 3映像对齐问题
[英]Bootstrap 3 images alignment issues
问题描述
Good day, slight issue here, I cannot seem place all three of my images in the same row together, can anyone help solve the issue? 
美好的一天，这里的问题很小，我似乎无法将所有三个图像放在同一行中，有人可以帮助解决该问题吗？ the first is in one row, then the second and third overlap each other. 第一个成行，然后第二个和第三个相互重叠。 I have already used bootstrap's 12 column grid but the other 2 just kept going down a row. 我已经使用了bootstrap的12列网格，但是其他2列一直在下降。 Also, is there a bootstrap code where the image adjusts to the row? 另外，是否有引导程序代码可将图像调整到该行？ thank you for reading. 感谢您的阅读。
heres a js fiddle link: https://jsfiddle.net/wxofr2ae/5/ 这是一个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
Okay! 好的！ I just solve your problem by doing just 3 steps: 我只需执行3个步骤即可解决您的问题：
Step 1: add the closing tag for the <div class="box"> of the BEAUTY block. 步骤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 -->
Step 2: remove a redundant </div> tag of the <div class="container"> block 步骤2：删除<div class="container">块的冗余</div>标记
Step 3: change the css class, make width: 100% , this step will solve the image overlap: 步骤3：更改CSS类，将width: 100% ，此步骤将解决图像重叠问题：
.bhw_link {
width: 100%;
height: 300px;
}
解决方案2
1 2018-09-24 03:59:30
You missed closing div <div class="box"> and change css of 您错过了关闭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
It's just because you ommitted the closing tag 只是因为您省略了结束标签
<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>
Try class "img-responsive" for your image tag if you want to scale the image to the parent element or just set it to width 100% because the image is already inside the grid system of bootstrap 如果要将图像缩放到父元素或将其设置为宽度100％，请尝试为图像标签使用“ img响应”类，因为该图像已位于bootstrap的网格系统内
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.