Question

我已经确定样式GROUP BY以确定它是否正确，但它重叠并转到外面。这是我的HTML

border: 1px solid black;

这是图像

看，<div class="panel panel-default"> <div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div> <div class="panel-footer clearfix"> <p>Drink whaterver jklasd jklasd jklnxm,c kasdk jj jjjjs lasd jklasd m,zxc asd kljaskd kljasd kl</p> <div style="border: 1px solid black; display: block;" class="pull-left"> <div class="row"> <p>By <a href="#">Jerald Patalinghug</a></p> </div> <div class="row"> Tags: <a href="#">Funny</a>, <a href="#">Wtf</a>, <a href="#">Nice</a> </div> </div> <div style="border: 1px solid black;" class="pull-right"> <div id="votes"> <div class="row"> <a href="#" data-card_id="26" class="vote upvote btn btn-default"> <span class="fa fa-thumbs-up"></span> </a> <a href="#" data-card_id="26" class="vote downvote btn btn-default"> <span class="fa fa-thumbs-down"></span> </a> </div> <div class="row"> <center> <span class="vote_count">1</span> points </center> </div> </div> </div> <div class="clearfix"></div> </div> </div>的内部正在外面。

EDIT1 谢谢大家，我所做的就是删除每个div上的div.pull-left

class="row"

Answer 1

删除

<div class="row">

在每个有界的div中 - 这些是向左和向右添加-15px。这些仅在嵌入.container或.col-sm-12（例如）内时使用。

如果您不能100％确定引导网格的工作原理，那么这是一个很好的阅读：

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

Answer 2

使用class container-fluid以及左拉/右拉。

解决方案：

<div class="panel panel-default">
    <div class="panel-body">This page is temporarily disabled by the site administrator for some reason.</div>
    <div class="panel-footer clearfix">
        <p>Drink whaterver jklasd jklasd jklnxm,c kasdk jj jjjjs lasd jklasd m,zxc asd kljaskd kljasd kl</p>
        <div style="border: 1px solid black; display: block;" class="pull-left container-fluid">
            <div class="row">
                <p>By <a href="#">Jerald Patalinghug</a></p>
            </div>
            <div class="row">
                Tags: <a href="#">Funny</a>, <a href="#">Wtf</a>, <a href="#">Nice</a>
            </div>
        </div>
        <div style="border: 1px solid black;" class="pull-right container-fluid">
            <div id="votes">
                <div class="row">
                    <a href="#" data-card_id="26" class="vote upvote btn btn-default">
                        <span class="fa fa-thumbs-up"></span>
                    </a>
                    <a href="#" data-card_id="26" class="vote downvote btn btn-default">
                        <span class="fa fa-thumbs-down"></span>
                    </a>
                </div>
                <div class="row">
                    <center>
                        <span class="vote_count">1</span> points
                    </center>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

在样式中应用填充以获得漂亮的外观

<div style="border: 1px solid black;padding: 2%; display: block;" class="pull-left container-fluid">

<div style="border: 1px solid black;padding: 2%" class="pull-right container-fluid">

如何使拉左/拉右内导致它向外

2 个答案: