ブートストラップで列間にスペースを追加する

Question

スペースの問題があります。ここでは、コードです：縁なし

.border { 
 
    border: 1px solid red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="row"> 
 
    <div class="col-md-4 border"> 
 
    <p>.......</p> 
 
    </div> 
 
    <div class="col-md-4 border"> 
 
    <p>.......</p> 
 
    </div> 
 
    <div class="col-md-4 border"> 
 
    <p>.......</p> 
 
    </div> 
 
</div>

、それを見つけるのに見えます。しかし、境界を追加すると、彼らはお互いに触れます。非常に醜いように見えます。マージンを左右に追加しても効果はありません。最後の列は次の行にダンプされます。ネガティブパディングでマージンを補正することもできません。

私はオプションがありません。列間にスペースを追加するには何が必要ですか？

Answer 1

列自体、塔内のコンテンツにあなたのルールを適用していない/

.border { 
    border: 1px solid red; 
} 

<div class="col-md-4"> 
    <div class="border">Content>/div> 
</div> 

例：

body { 
 
    padding-top: 60px; 
 
} 
 
.border { 
 
    border: 1px solid red; 
 
    padding: 10px; 
 
    background-color: aliceblue; 
 
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
     <p class="border">Hello</p> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <p class="border">Hello</p> 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <p class="border">Hello</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

ただ、最後の以外のすべての要素から右境界線を削除例えば、

.border:not(:last-child) { 
    border-right: none; 
} 

Demo