<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 6 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 6 年前。
我最近完成了交互式视频库的开发。我只使用了 HTML 和 CSS。现在我在让它响应时遇到了问题。一旦我调整浏览器的大小，图像就会脱离框架。我希望图片库更改编号。根据浏览器宽度设置列数，而不影响画廊的功能或悬停效果。 我的元素文件夹的链接是 - https://drive.google.com/open?id=0Bx9r_Ov1lSfAYmxDcmJCSkY1MjA
任何帮助都将不胜感激。
最佳答案
您不能在您的元素中使用 Bootstrap 链接，您可以删除文件中的内联样式。我已经解决了你的错误并且它工作得很好......你可以在你的元素文件夹中尝试这个 html 文件然后运行它......
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="thumb-css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="isotope-wrap">
<div class="col-lg-12 offset-top-34">
<div data-isotope-layout="fitRows" data-isotope-group="gallery" class="isotope isotope--loaded" style="position: relative; height: 2100px;">
<div class="row">
<div data-filter="All" class="col-xs-12 col-sm-6 col-lg-4 isotope-item">
<div class="inset-xl-left-20 inset-xl-right-20">
<a class="thumbnail-classic" href="index-variant-2.html" target="_blank">
<figure>
<img class="img-responsive" src="images/intense-570x428.jpg" alt="">
<figcaption class="thumbnail-classic-caption text-center">
<h4 class="thumbnail-classic-title text-light" style="font-family: 'Montserrat', sans-serif; color: #212121;text-transform: uppercase; text-align: center; font-weight: 100">Intense</h4>
<p class="thumbnail-classic-desc text-bold veil reveal-xs-block" style="font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-weight: 100;text-align: center;">Feel the power of future</p>
</figcaption>
</figure>
</a>
</div>
</div>
<div data-filter="All" class="col-xs-12 col-sm-6 col-lg-4 isotope-item" >
<div class="inset-xl-left-20 inset-xl-right-20">
<a class="thumbnail-classic" href="index-variant-2.html" target="_blank">
<figure>
<img class="img-responsive" src="images/intense-570x428.jpg" alt="">
<figcaption class="thumbnail-classic-caption text-center">
<h4 class="thumbnail-classic-title text-light" style="font-family: 'Montserrat', sans-serif; color: #212121;text-transform: uppercase; text-align: center; font-weight: 100">Intense</h4>
<p class="thumbnail-classic-desc text-bold veil reveal-xs-block" style="font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-weight: 100;text-align: center;">Feel the power of future</p>
</figcaption>
</figure>
</a>
</div>
</div>
<div data-filter="All" class="col-xs-12 col-sm-6 col-lg-4 isotope-item" >
<div class="inset-xl-left-20 inset-xl-right-20">
<a class="thumbnail-classic" href="index-variant-2.html" target="_blank">
<figure>
<img class="img-responsive" src="images/intense-570x428.jpg" alt="">
<figcaption class="thumbnail-classic-caption text-center">
<h4 class="thumbnail-classic-title text-light" style="font-family: 'Montserrat', sans-serif; color: #212121;text-transform: uppercase; text-align: center; font-weight: 100">Intense</h4>
<p class="thumbnail-classic-desc text-bold veil reveal-xs-block" style="font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-weight: 100;text-align: center;">Feel the power of future</p>
</figcaption>
</figure>
</a>
</div>
</div>
<div data-filter="All" class="col-xs-12 col-sm-6 col-lg-4 isotope-item" >
<div class="inset-xl-left-20 inset-xl-right-20">
<a class="thumbnail-classic" href="index-variant-2.html" target="_blank">
<figure>
<img class="img-responsive" src="images/intense-570x428.jpg" alt="">
<figcaption class="thumbnail-classic-caption text-center">
<h4 class="thumbnail-classic-title text-light" style="font-family: 'Montserrat', sans-serif; color: #212121;text-transform: uppercase; text-align: center; font-weight: 100">Intense</h4>
<p class="thumbnail-classic-desc text-bold veil reveal-xs-block" style="font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-weight: 100;text-align: center;">Feel the power of future</p>
</figcaption>
</figure>
</a>
</div>
</div>
<div data-filter="All" class="col-xs-12 col-sm-6 col-lg-4 isotope-item" >
<div class="inset-xl-left-20 inset-xl-right-20">
<a class="thumbnail-classic" href="index-variant-2.html" target="_blank">
<figure>
<img class="img-responsive" src="images/intense-570x428.jpg" alt="">
<figcaption class="thumbnail-classic-caption text-center">
<h4 class="thumbnail-classic-title text-light" style="font-family: 'Montserrat', sans-serif; color: #212121;text-transform: uppercase; text-align: center; font-weight: 100">Intense</h4>
<p class="thumbnail-classic-desc text-bold veil reveal-xs-block" style="font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-weight: 100;text-align: center;">Feel the power of future</p>
</figcaption>
</figure>
</a>
</div>
</div>
<div data-filter="All" class="col-xs-12 col-sm-6 col-lg-4 isotope-item" >
<div class="inset-xl-left-20 inset-xl-right-20">
<a class="thumbnail-classic" href="index-variant-2.html" target="_blank">
<figure>
<img class="img-responsive" src="images/intense-570x428.jpg" alt="">
<figcaption class="thumbnail-classic-caption text-center">
<h4 class="thumbnail-classic-title text-light" style="font-family: 'Montserrat', sans-serif; color: #212121;text-transform: uppercase; text-align: center; font-weight: 100">Intense</h4>
<p class="thumbnail-classic-desc text-bold veil reveal-xs-block" style="font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-weight: 100;text-align: center;">Feel the power of future</p>
</figcaption>
</figure>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>关于javascript - 如何使我的图片库响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41897545/