html - 如何使向左/向右拉动到外面

我已经设置了border: 1px solid black;的样式来确定它是否正确，但是它重叠并且移到了外面。这是我的HTML

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

这是图像



看，div.pull-left的内部在外面。

编辑1
谢谢大家，我要做的是在每个div上删除class="row"

<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>
                            <p>By <a href="#">Jerald Patalinghug</a></p>
                        </div>
                        <div>
                            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>
                                                            <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>
                                <center>
                                    <span class="vote_count">1</span> points
                                </center>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>

最佳答案

除掉

<div class="row">

在每个带边框的div内-这些元素在左侧和右侧添加-15px。仅当您嵌套在.container或.col-sm-12（例如）中时才使用它们。

如果您不确定100％引导网格的工作原理，那么这是一本好书：

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