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

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

Answer 2

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

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

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

Answer 3

只需向div中的每个内容添加span标记，即可生成边框而无需使用边距，这会让您的代码感到烦恼。

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

JSFiddle

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

3 个答案: