1

私はtwitter-bootstrapフレームワークを使用しており、3つのspan4の間に垂直セパレーターを配置しようとしています.

だから私はこれをコーディングしました

ここに入力すると、結果がより明確になります

CSS

.span4 {
    border-right: 2px solid red;
    background: grey;
    text-align: center;
    height: 400px;
    color: white;
}
.span4:last-child {
    border-right: none;
}

HTML

<div class="container">
    <div class="row-fluid">
        <div class="span4">Hello</div>
        <div class="span4">Stack</div>
        <div class="span4">Overflow</div>
    </div>
</div>

ご覧のとおり、境界線はスパンの最後にありますが、中央にはありません...また、スパン4とは異なる長さの線を垂直方向に中央揃えにしたいと思います。

アドバイスやヒントをいただければ幸いです。

さらに情報が必要な場合はお知らせください。投稿を編集します。

4

3 に答える 3

2

Bootstrap のマージンをいじる必要があります。デフォルトの Bootstrap スタイルは要素margin-leftに 20px を追加し[class*="span"]ます。つまり、表示は次のようになります。

[margin][element] [margin][element] [margin][element]

これらの余白の間に直接境界線を引くには、少しハックして、.span4とその中のコンテンツの間に新しい仕切りを導入する必要があります。

   <div class="span4">
        <div class="inner">
            Hello
        </div>
    </div>
    <div class="span4">
        <div class="inner">
            Stack
        </div>
    </div>

.row-fluid .span4 {
    border-right: 2px solid red;
    height: 400px;
    margin:0;
}
.span4:last-child {
    border-right: none;
}
.inner {
    margin:0 10px 0 10px;
    text-align: center;
    color: white;
    background: grey;
    height:100%;
}

これは非常に大まかなモックアップです: http://jsfiddle.net/V6qGM/5/

于 2013-05-19T11:01:54.003 に答える
1

最善の解決策は、高さが 1 ピクセルの背景画像を作成し、それを含む div に割り当てて、y を繰り返すようにすることです。しかし、私はこれを思いつきました：

.span4 {
    position: relative;
}
.span4:first-child::after {
    content: "";
}
.span4::after {
    border-left: 1px solid red;
    content: " ";
    display: block;
    width: 1px;
    position: absolute;
    top: 0;
    right: 384px;
    bottom: 0;
}

境界線を取り除くことを忘れないでください

于 2013-05-19T11:02:40.287 に答える