Bootstrap 布局问题 [英] Bootstrap layout issues
问题描述
使用 Bootstrap 模板(免费响应模板摄影).将照片、颜色更改为我拥有和喜欢的东西.开始在照片中添加弹出框以进行描述,但现在布局已从 3-4 个缩略图宽(span3 或 span4)变为垂直堆叠的所有照片.现在是 1 列,而不是 3 或 4 列.除了颜色之外,没有更改任何 CSS.我哪里出错了?任何想法在哪里纠正这个布局?
<div class="容器"><div class="row"><article class="span4"><h2>带有 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 <script src="js/jquery.min.js"></script><script src="js/bootstrap-tooltip.js"></script><script src="js/pbootstrap-popover.js"></script><脚本>$(函数(){ $("#BDR-BM4").popover({title: 'BDR-BM4', content: "接收器是使用精密数控机床定制的,7075 T6 铝,美国锻件.必须运送到 FFL 支架"});});<ul><img src="img/bar/tBDR-B12.png" id="BDR-B12" class="btn btn-success" rel="popover" data-original-title="">BDR-B12 <script src="js/jquery.min.js"></script><script src="js/bootstrap-tooltip.js"></script><script src="js/pbootstrap-popover.js"></script><脚本>$(函数(){ $("#BDR-B12").popover({title: 'BDR-15A', content: "接收器是使用精密数控机床定制的,7075 T6 铝,美国锻件.必须运送到 FFL 支架"});});<ul><img src="img/bar/tBDR-B20H.png" id="BDR-B20H" class="btn btn-success" rel="popover" data-original-title="">BDR-B20H <script src="js/jquery.min.js"></script><script src="js/bootstrap-tooltip.js"></script><script src="js/pbootstrap-popover.js"></script><脚本>$(函数(){ $("#BDR-B20H").popover({title: 'BDR-B20H', content: "接收器是使用精密数控机床定制的,7075 T6 铝,美国锻件.必须运送到 FFL 支架"});});<ul><img src="img/bar/tBDR-B16F.png" id="BDR-B16F" class="btn btn-success" rel="popover" data-original-title="">BDR-B16F <script src="js/jquery.min.js"></script><script src="js/bootstrap-tooltip.js"></script><script src="js/pbootstrap-popover.js"></script><脚本>$(函数(){ $("#BDR-B16F").popover({title: 'BDR-B16F', content: "接收器是使用精密数控机床定制的,7075 T6 铝,美国锻件.必须运送到 FFL 支架"});});</body></html>
您在页面上多次使用以下代码,仅在页脚中放置一次.
<script src="js/jquery.min.js"></script><script src="js/bootstrap-tooltip.js"></script><script src="js/pbootstrap-popover.js"></script><脚本>$(函数(){$("#BDR-BM4").popover({标题:'BDR-BM4',内容:Black Dawn 下机匣是使用精密 CNC 机器定制的,7075 T6 铝,美国锻件.必须运送到 FFL 支架"});});$(函数(){$("#BDR-B12").popover({标题:'BDR-15A',内容:Black Dawn 下机匣是使用精密 CNC 机器定制的,7075 T6 铝,美国锻件.必须运送到 FFL 支架"});});$(函数(){$("#BDR-B20H").popover({title: 'BDR-B20H',内容:Black Dawn 下机匣是使用精密 CNC 机器定制的,7075 T6 铝,美国锻件.必须运送到 FFL 支架"});});$(函数(){$("#BDR-B16F").popover({title: 'BDR-B16F',内容:Black Dawn 下机匣是使用精密 CNC 机器定制的,7075 T6 铝,美国锻件.必须运送到 FFL 支架"});});
</文章>
Working with a Bootstrap template (free-responsive-template-photography). Changed photos, colors to something I have and like. Started to add popovers to the photos for description, but now the layout has gone from 3-4 thumbnails wide (span3 or span4) to all the photos being stacked vertical. 1 column now instead of 3 or 4. Haven't changed any of the CSS other than colors. Where have I gone awry? Any ideas where to get this layout corrected?
<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>
You are using the following code multiple times on the page , place it in the footer only once .
<script src="js/jquery.min.js">
<script src="js/bootstrap-tooltip.js">
<script src="js/pbootstrap-popover.js">
Also remove the clear div
after the article tag
i.e
<div class="clear"></div>/*remove*/
I have cleaned up your code a bit and rearranged a few things , use the following in your body and see if its the desired result you wish to attain:
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>
这篇关于Bootstrap 布局问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!