0 
.rounded-box(@border; @radius; @bg-color: transparent; @padding: 5px 10px) {
   border:1px solid @border;
   .border-top-radius(@radius);
   .border-bottom-radius(@radius);
   .border-left-radius(@radius);
   .border-right-radius(@radius);
   background-color: @bg-color;
   padding: @padding;
}

下のスクリーンショットでは、角の丸いボックスを作成する mixin があります。各 div 間にスペースがなく、それぞれに .make-column(4) が適用されていることがわかります。

*bootstrap.less をメインの less ファイルにインクルードし、lessc を実行してコンパイルします。これは、990px​​ を超える幅のスクリーン ショットです。どんな助けでも大歓迎です。

ここに画像の説明を入力

@rounded-box-radius: 10px;
@rounded-box-border: #ccc;
@rounded-box-height:230px;
@box-bg-color: #eee;

.article {
    .make-column(4);
}

.promo {
    .make-column(4);
    .visible-lg;
    .rounded-box(@rounded-box-border, @rounded-box-radius);
    height: @rounded-box-height;
} // promo end

HTML

<div class="promo">
    Promo
</div>

<div class="article">
    <h3>Blog Entry 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor.</p>

    <div class="date">March 23, 2013</div>
    <div class="read-more"><a href="blog-detail.php" title="read more on this title">Read more</a></div>
</div>

<div class="promo">
    Promo
</div>
4

2 に答える 2

0

@jtloweは パディングについてhttps://stackoverflow.com/a/18127896/1596547にあります。ただし、列にマージン ルールを適用すると、グリッドが壊れます (マージンが幅に加算されるため)。

ここと同じように、追加のコンテナーを使用します: twitter ブートストラップ v3 を使用して div 間にスペースが必要です(複製??)

html

<div class="promo">
    <div class="rounded-box">Promo</div>
</div>

以下

.rounded-box(@border; @radius; @bg-color: transparent; @margin: 5px 10px) {
   border:1px solid @border;
   .border-top-radius(@radius);
   .border-bottom-radius(@radius);
   .border-left-radius(@radius);
   .border-right-radius(@radius);
   background-color: @bg-color;
   margin: @margin;
   height:@rounded-box-height;
}

ここで高さ (@rounded-box-height) を適用し、パディングをマージンに置き換えます。

于 2013-09-12T18:29:22.963 に答える