使用Bootstrap模板(自由响应模板摄影)。将照片,颜色更改为我拥有和喜欢的东西。开始为照片添加弹出框以供描述,但现在布局已从3-4个缩略图宽(span3或span4)变为垂直堆叠的所有照片。现在只有1列而不是3或4.除了颜色之外没有更改任何CSS。我哪里出错了?有任何想法可以纠正这种布局吗?
<body>
<div class="container">
<div class="row">
<article class="span4">
<h2>Popover with Twitter Bootstrap</h2>
<div class="clear"></div>
<ul><img src="img/bar/tBDR-BM4.png" id="BDR-BM4" class="btn btn-success" rel="popover" data-original-title="">BDR-BM4</a>
</ul>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/pbootstrap-popover.js"></script>
<script>
$(function ()
{ $("#BDR-BM4").popover({title: 'BDR-BM4', content: "Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder"});
});
</script>
<ul><img src="img/bar/tBDR-B12.png" id="BDR-B12" class="btn btn-success" rel="popover" data-original-title="">BDR-B12</a>
</ul>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/pbootstrap-popover.js"></script>
<script>
$(function ()
{ $("#BDR-B12").popover({title: 'BDR-15A', content: "Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder"});
});
</script>
<ul><img src="img/bar/tBDR-B20H.png" id="BDR-B20H" class="btn btn-success" rel="popover" data-original-title="">BDR-B20H</a>
</ul>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/pbootstrap-popover.js"></script>
<script>
$(function ()
{ $("#BDR-B20H").popover({title: 'BDR-B20H', content: "Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder"});
});
</script>
<ul><img src="img/bar/tBDR-B16F.png" id="BDR-B16F" class="btn btn-success" rel="popover" data-original-title="">BDR-B16F</a>
</ul>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/pbootstrap-popover.js"></script>
<script>
$(function ()
{ $("#BDR-B16F").popover({title: 'BDR-B16F', content: "Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder"});
});
</script>
</body></html>
答案 0 :(得分:0)
您在页面上多次使用以下代码,只将其放在页脚中一次。
<script src="js/jquery.min.js">
<script src="js/bootstrap-tooltip.js">
<script src="js/pbootstrap-popover.js">
同时删除clear div
之后的article tag
,即
<div class="clear"></div>/*remove*/
我已经清理了你的代码并重新安排了一些事情,在你的身体中使用以下内容,看看它是否达到你希望达到的效果:
Jsfiddle with the result Please check
<div class="container">
<div class="row">
<article class="span12">
<h2>Popover with Twitter Bootstrap</h2>
<div class="row-fluid">
<div class="span3">
<ul>
<img src="http://webpages.charter.net/tfbone/img/bar/tBDR-BM4.png" id="BDR-BM4"
class="btn btn-success" rel="popover" data-original-title="">BDR-BM4</a>
</ul>
</div>
<div class="span3">
<ul>
<img src="http://webpages.charter.net/tfbone/img/bar/tBDR-B12.png" id="BDR-B12"
class="btn btn-success" rel="popover" data-original-title="">BDR-B12</a>
</ul>
</div>
<div class="span3">
<ul>
<img src="http://webpages.charter.net/tfbone/img/bar/tBDR-B20H.png" id="BDR-B20H"
class="btn btn-success" rel="popover" data-original-title="">BDR-B20H</a>
</ul>
</div>
<div class="span3">
<ul>
<img src="http://webpages.charter.net/tfbone/img/bar/tBDR-B16F.png" id="BDR-B16F"
class="btn btn-success" rel="popover" data-original-title="">BDR-B16F</a>
</ul>
</div>
<script>
</script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/pbootstrap-popover.js"></script>
<script>
$(function() {
$("#BDR-BM4").popover({
title: 'BDR-BM4',
content: "Black Dawn Lower Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder"
});
});
$(function() {
$("#BDR-B12").popover({
title: 'BDR-15A',
content: "Black Dawn Lower Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder"
});
});
$(function() {
$("#BDR-B20H").popover({
title: 'BDR-B20H',
content: "Black Dawn Lower Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder"
});
});
$(function() {
$("#BDR-B16F").popover({
title: 'BDR-B16F',
content: "Black Dawn Lower Receivers are custom built using precision CNC machines, 7075 T6 aluminum,USA forgings. Must Ship to FFL Holder"
});
});
</script>
</div>
</article>
</div>
</div>