我正在尝试做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上的图像,因为它没有让我放上它
答案 0 :(得分:0)
希望这会有所帮助
<!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>
<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>
</head>
<body style="height: 100%">
<!--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>
</li>
<!--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>
</li>
<!--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> </li>
<!--Fourth Tab-->
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">About Us<span class="caret"></span></a> <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></li>
</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>
答案 1 :(得分:0)
这应该可以实现您想要的,但是我不确定将图像嵌套在anchor标签中会如何表现。供参考,请参阅图像顶部卡上的引导程序文档:https://getbootstrap.com/docs/4.1/components/card/#images
<div id="inner-portfolio-wrapper">
<div id="portfolio-item-1" class="portfolio-item">
<h2>
ITEM 1
</h2>
</div>
<div id="portfolio-item-2" class="portfolio-item">
<h2>
ITEM 2
</h2>
</div>
<div id="portfolio-item-3" class="portfolio-item">
<h2>
ITEM 3
</h2>
</div>
</div>
<button type="button" onclick="clickMe()">
Click Me
</button>