css - 阻止边界扩展到边距/填充

Question

我正在尝试使用 Twitter Bootstrap 为我的博文创建元部分。我遇到的问题是我的 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; }

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