阻止边框扩展到边距/填充

Question

我正在尝试使用 twitter 引导程序为我的博客文章创建元部分。我遇到的问题是我的 DIV 周围的边框正在扩展到行的负边距，我不知道为什么（我的其他 div 中的边框没有这个问题）。

如果有人可以帮助我弄清楚如何阻止顶部和底部边框扩展到左右填充/边距，将不胜感激。

这是适用的 CSS：

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.col-md-3 {
    width: 25%;
    float: left;

}

.meta-entry-right{
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
    text-transform: uppercase;
    color: gray;
}

.meta-entry{
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    font-size: 12px;
    text-transform: uppercase;
    color: gray; 
}

这是 HTML：

<footer class="row">
                <div class="col-md-3 meta-entry">
                    Author: <br>
                    <?php the_author_link(); ?> 
                </div>
                <div class="col-md-3 meta-entry">
                    Posted On:<br>
                    <?php the_time('F j, Y'); ?>
                </div>
                <div class="col-md-3 meta-entry">
                    Categorized:<br>
                    <?php echo get_the_category_list(', '); ?>
                </div>
                <div class="col-md-3 meta-entry-right">
                    Discussion:<br>
                    <a href="<?php comments_link(); ?>"><?php comments_number(); ?></a>
                </div>
            </footer>

您可以在此处查看实际问题：http://onedirectionconnection.com/tester/

提前感谢您的帮助！

Answer 1

我不完全确定我能得到你想要的，但如果你这样做的话。

.footer .row { margin:0; }

我认为您可以根据需要应用边框。

Answer 2

在您的元素上使用box-sizing 属性。

要将自然框布局模型应用于所有元素，请将其添加到您的 CSS

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }

Answer 3

只需将span 标签添加到 div 内的每个内容，您就可以生成边框，而不会影响您的代码。

span{
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

JSFiddle