引导程序布局问题

使用引导程序模板（自由响应模板摄影）。将照片，颜色更改为我喜欢的东西。开始将照片添加到照片中进行描述，但是现在布局已经从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>

来源

2013-02-20 TFBone

你可以发布测试页面或向我们展示完全正在发生的事情吗？ – Shail 2013-02-20 10:38:14

http://webpages.charter.net/tfbone/Popover.htm – TFBone 2013-02-20 12:44:05

您在页面上多次使用以下代码，只将其放入页脚一次。

<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

screenshot of result in browser

<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>

来源

2013-02-21 11:56:58 Shail

是的，这样做。谢谢！一直看着太久没有变化。知道有人会看到它。再次感谢！！ – TFBone 2013-02-22 00:44:10

引导程序布局问题

回答

相关问题