引導程序佈局問題

使用引導程序模板（自由響應模板攝影）。將照片，顏色更改爲我喜歡的東西。開始將照片添加到照片中進行描述，但是現在佈局已經從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

引導程序佈局問題

回答

相關問題