【发布时间】：2018-12-26 20:26:55
【问题描述】：
我试图做this，但我找不到方法或属性。谁能帮我做到这一点？ 我的代码在下面
<!DOCTYPE html>
<html lang="en">
<head>
<!--Bootstrap-->
<meta name="viewport" content="width=device-width, initial- scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Decleration-->
<meta charset="utf-8">
<title>Home</title>
</head>
<body style="height: px">
<!--Content-->
<!--navbar-fixed-top (fix that)-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Directory 41</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<!--first tab-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Topics<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Computer Building</a></li>
<li><a href="#">Cryptocurrencies</a></li>
<li><a href="#">Hacking</a><li>
<li><a href="#">Programming</a></li>
<li><a href="#">Troubleshooting</ a></li>
</ul>
<!--second tab-->
<li class="dropdown">
<a class="dropdown-toggle" data- toggle="dropdown" href="#">Books<span class="caret"></ span></a>
<ul class="dropdown-menu">
<li><a href="#">CWNA Guide to Wireless LANs</a></li>
<li><a href="#">Learn CCNA</a></li>
</ul>
<!--Third Tab-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Definitions<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Computer Building</a></li>
<li><a href="#">Cryptocurrencies</a></li>
<li><a href="#">Hacking</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">Troubleshooting</a></li>
</ul>
<!--Fourth Tab-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">About Us<span class="caret"></span>
<ul class="dropdown-menu">
<li><a href="#">Our Story</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Survey</a></li>
</ul>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
</ul>
</div>
</div>
</nav>
<!--End of Nav Bar-->
<!--Beggining of Content-->
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque gravida, lectus vitae gravida pharetra, arcu mi commodo orci, non tempus ex diam sit amet lorem. Nulla eros tortor, dictum nec lacus mattis, interdum pharetra leo. Phasellus lobortis nulla id ex tristique iaculis. Donec nec facilisis mi. Vestibulum at est elementum, laoreet eros sit amet, mollis dolor. Suspendisse sit amet varius mauris.</p>
<!--Gallery(Books)-->
<!--first gallery-->
<div class="gallery">
<a target="_blank" href="#">
<img src="image" alt="" height="200" width="150"></a>
<div class="desc">Desc goes here</div></div>
<!--second gallery-->
<div class="gallery2">
<a target="_blank" href="#">
<img src="image" alt="#" height="200" width="150"></a>
<div class="desc">Desc goes here</div></div>
</body>
</html>
<style type="text/css">
/*content*/
body {
background-color: light gray;
}
/*p {
padding: 10px;
margin: 10px;
background-color: black;
color: yellow;
}*/
/*gallery*/
.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 170px;
}
.gallery:hover {
border: 1px solid #777;
}
.gallery img {
width: 100%;
height: auto;
}
.desc {
padding: 15px;
text-align: center;
}
/*gallery 2*/
.gallery2 {
margin: 5px;
border: 1px solid #ccc;
float: right;
width: 180px;
}
</style>
如果有人可以修复该问题，请原谅遗漏的代码，因为它很长时间在移动设备上的每行上做 4 个空格，并且真的不知道如何添加代码，所以我真的很抱歉。感谢任何帮助
我也漏掉了 img src 上的图片，因为它没有让我放它
【问题讨论】：
-
链接到 404 页面。
-
这是一个新的希望工作的链接code.sololearn.com/Wqby20H9rKvj
-
相信你想看看这部分引导文档：getbootstrap.com/docs/4.1/components/card/#images
标签： html css layout bootstrap-4 css-float