2

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/で確認できます。

事前に助けてくれてありがとう！

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 に答える