web-dev-qa-db-ja.com

Bootstrapグリッドが機能しない列の境界線

bootstrapでページを作成しています。ここでは、行内で4つの列を使用しています。コードは次のとおりです。

<div class="row text-center">
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
    <div class="col-md-3"> </div>
</div>

各列にクラスを追加して、それぞれに境界線を設定できるようにしました。

.cliente {
    margin-top:10px;
    border: #cdcdcd medium solid;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

問題は、境界線をbootstrap=グリッドの自然なガターで分離する必要があり、それが機能しないことです。

私を手伝ってくれますか？ありがとう。

twitter-bootstrapbordergutter
10
Mauro Barrionuevo

Bootstrap 'col- *'はパディングを使用してグリッド列間の間隔または「ガター」を作成するため、列内で別のブロック要素（つまり、DIV）を使用する必要があります。

 <div class="row text-center">
      <div class="col-md-3"> 
        <div class="cliente"> 
          ..
        </div>
      </div>
 </div>

デモ： http://www.bootply.com/71ZVOWCFW

21
Zim

outlineプロパティを使用できます。いいえcliente divは必要ありません。

.row > div {
    margin-top:10px;
    padding: 20px;
    outline: 2px solid #ccc;
    outline-offset: -10px;
    -moz-outline-radius: 10px;
    -webkit-outline-radius: 10px;
 }
7
Carlos Macias

追加の要素を必要としないバージョンを作成しましたが、高さが等しくない場合があります。

Twitter Bootstrapsグリッドシステムを使用して2つの列の間に行を追加する方法

2
Ross Angus

outlineソリューションを展開するには、隣接する2つの列の両方に境界線がある場合に同じサイズに折りたたむ境界線が必要な場合は、box-shadowを使用します。

box-shadow: -.5px -.5px 0 .5px #ccc, inset -1px -1px 0 0 #ccc;

box-shadow対outlineのマイナス面は、box-shadowがサブピクセル位置で任意のブラウザーでレンダリングできるのに対し、アウトラインと境界線が最も近いピクセルにスナップすることです。 box-shadowがサブピクセル位置に配置されると、ソフトまたはぼやけて表示されます。これを回避する唯一の方法は、列がサブピクセル位置に配置される原因となることをしないことです。

1
Adam Leggett