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.