阻止边界扩展为边距/填充

我正在尝试使用twitter bootstrap为我的博客文章创建我的元节。我遇到的问题是我的DIV周围的边界正在扩大到该行的负边界，我无法弄清楚为什么（我的其他divs中的边框没有这个问题）。阻止边界扩展为边距/填充

如果有人可以帮助我弄清楚如何展开成左右填充/利润率停止顶部和底部边框，这将不胜感激。

这里是适用的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：提前http://onedirectionconnection.com/tester/

感谢您的帮助：

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

您可以在这里的行动来看待这个问题！

来源

2013-10-06 nellygrl

我不能完全肯定我得到你所追求的，但如果你做到这一点。

.footer .row { margin:0; }

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

来源

2013-10-06 18:35:46

这工作！非常感谢！ – nellygrl

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

向所有元素添加到您的CSS

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

来源

2013-10-06 15:50:46 avrahamcool

这是奇怪的事情。该代码已经通过引导应用。 http://onedirectionconnection.com/tester/wp-content/plugins/wordpress-bootstrap-css/resources/bootstrap-3.0.0/css/bootstrap.css – nellygrl

只需添加span标签每个内容的div内就可以生成了无空白困扰着你的代码的边界应用自然箱的布局模式。

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

JSFiddle

来源

2013-10-06 15:54:43 Yotam

问题是，我想边界扩展的长度元信息，我只是不希望边界扩大到.row div的负边界。 – nellygrl

阻止边界扩展为边距/填充

回答

相关问题