0

Bootstrap テンプレートの操作 (free-responsive-template-photography)。写真、色を私が持っていて好きなものに変更しました。説明のために写真にポップオーバーを追加し始めましたが、現在、レイアウトは 3 ～ 4 個のサムネイル (span3 または span4) から、すべての写真が垂直に積み重ねられています。3 列または 4 列ではなく 1 列になりました。色以外の 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>
4

1 に答える 1

0

ページで次のコードを複数回使用しています。フッターに 1 回だけ配置してください。

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

ieのclear div後のも削除しますarticle tag

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


私はあなたのコードを少し整理し、いくつかのことを再配置しました。あなたの体で以下を使用して、あなたが達成したい望ましい結果であるかどうかを確認してください:
Jsfiddle と結果を確認してください

ブラウザの結果のスクリーンショット

<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-21T11:56:58.277 に答える