2

我正在尝试使用 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/

提前感谢您的帮助！

4

3 回答 3

1

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

.footer .row { margin:0; }

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

于 2013-10-06T18:35:46.780 回答
0

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

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

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }
于 2013-10-06T15:50:46.790 回答
0

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

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

JSFiddle

于 2013-10-06T15:54:43.060 回答