Twitter bootstrap 引导布局问题_Twitter Bootstrap

Twitter bootstrap 引导布局问题

twitter-bootstrap

Twitter bootstrap 引导布局问题,twitter-bootstrap,Twitter Bootstrap,使用引导模板（免费响应模板摄影）。将照片、颜色更改为我拥有和喜欢的东西。开始将弹出框添加到照片中进行描述，但现在布局已从3-4个缩略图宽（span3或span4）变为所有垂直堆叠的照片。现在是1列，而不是3或4列。除了颜色外，没有更改任何CSS。我哪里出错了？你知道在哪里纠正这个布局吗 <body> <div class="container"> <div class="row"> <article class="span4">

使用引导模板（免费响应模板摄影）。将照片、颜色更改为我拥有和喜欢的东西。开始将弹出框添加到照片中进行描述，但现在布局已从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>


使用Twitter引导的Popover
BDR-BM4

$（函数（）
{$（“#BDR-BM4”）.popover（{标题：'BDR-BM4'，内容：“接收器使用精密数控机床定制，7075 T6铝，美国锻件。必须运送至FFL支架”}）；
});
BDR-B12

$（函数（）
{$（“#BDR-B12”）.popover（{标题：'BDR-15A'，内容：“接收器使用精密数控机床定制，7075 T6铝，美国锻件。必须运送至FFL支架”}）；
});
BDR-B20H

$（函数（）
{$（“#BDR-B20H”）.popover（{标题：'BDR-B20H'，内容：“接收器使用精密数控机床定制，7075 T6铝，美国锻件。必须运送至FFL支架”}）；
});
BDR-B16F

$（函数（）
{$（“#BDR-B16F”）.popover（{标题：'BDR-B16F'，内容：“接收器使用精密数控机床定制，7075 T6铝，美国锻件。必须运送至FFL支架”}）；
});

如果在页面上多次使用以下代码，请仅将其放在页脚中一次

 <script src="js/jquery.min.js">
 <script src="js/bootstrap-tooltip.js">
 <script src="js/pbootstrap-popover.js">

我已经清理了您的代码并重新安排了一些内容，请在您的身体中使用以下内容，看看这是否是您希望达到的结果：


使用Twitter引导的Popover

BDR-BM4


BDR-B12


BDR-B20H


BDR-B16F

$（函数（）{
$（“#BDR-BM4”）.popover({
标题：“BDR-BM4”，
内容：“Black Dawn下接收器采用精密数控机床定制，7075 T6铝合金，美国锻件。必须运送至FFL支架”
});
});
$（函数（）{
$（“#BDR-B12”）.popover({
标题：“BDR-15A”，
内容：“Black Dawn下接收器采用精密数控机床定制，7075 T6铝合金，美国锻件。必须运送至FFL支架”
});
});
$（函数（）{
$（“#BDR-B20H”）.popover({
标题：“BDR-B20H”，
内容：“Black Dawn下接收器采用精密数控机床定制，7075 T6铝合金，美国锻件。必须运送至FFL支架”
});
});
$（函数（）{
$（“#BDR-B16F”）.popover({
标题：“BDR-B16F”，
内容：“Black Dawn下接收器采用精密数控机床定制，7075 T6铝合金，美国锻件。必须运送至FFL支架”
});
});

你能发布测试页面或向我们展示到底发生了什么吗？是的，就是这样。谢谢看得太久了，没有任何变化。我知道有人会看到它。再次感谢！！

<div class="clear"></div>/*remove*/

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