引导布局问题(Bootstrap layout issues)

2019-11-01 14:25发布

具有引导模板工作(无响应模板 - 摄影)。 更改照片,颜色的东西我已经和喜欢。 开始popovers添加到照片的说明,但现在的布局从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>

Answer 1:

您正在使用的页面下面的代码多次,将其放置在页脚只有一次。

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

同时删除了clear divarticle 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>


文章来源: Bootstrap layout issues