Boostrapカードのボーダー

Question

こんにちは私はブートストラップv4.0.0 - ベータカードを使用したいと思います。

最初に、クラス「カードブロック」は私にとっては機能しません。私がクラス "カード本体"を使用する場合のみ、それは例のように見えます。

カード間の二重枠を削除するにはどうすればよいですか？すべてのカードには1pxのボーダーがあります。その間に2pxのボーダーがあり、1pxだけが欲しいです。単純な可能性はありますか？

これは私のコードです：

<div class="row no-gutters"> 
     <div class="card col-sm-6 col-lg-3"> 
      <div class="card-img-top"><img src="pic.jpg" /></div> 
      <div class="card-body"> 
       <p class="card-text">my text</div> 
      <div class="card-footer">my footer</div> 
     </div> 
     <div class="card col-sm-6 col-lg-3"> 
      <div class="card-img-top"><img src="pic.jpg" /></div> 
      <div class="card-body"> 
       <p class="card-text">my text</div> 
      <div class="card-footer">my footer</div> 
     </div> 
     <div class="card col-sm-6 col-lg-3"> 
      <div class="card-img-top"><img src="pic.jpg" /></div> 
      <div class="card-body"> 
       <p class="card-text">my text</div> 
      <div class="card-footer">my footer</div> 
     </div> 
     <div class="card col-sm-6 col-lg-3"> 
      <div class="card-img-top"><img src="pic.jpg" /></div> 
      <div class="card-body"> 
       <p class="card-text">my text</div> 
      <div class="card-footer">my footer</div> 
     </div> 
    </div> 

はあなたの助けのための感謝。

Answer 1

もborder utilities ...

https://www.codeply.com/go/tukHrs1GLz

<div class="row no-gutters"> 
     <div class="card col-sm-6 col-lg-3 border-right-0"> 
      <div class="card-img-top"><img src="pic.jpg" /></div> 
      <div class="card-body"> 
       <p class="card-text">my text</div> 
      <div class="card-footer">my footer</div> 
     </div> 
     <div class="card col-sm-6 col-lg-3 border-right-0"> 
      <div class="card-img-top"><img src="pic.jpg" /></div> 
      <div class="card-body"> 
       <p class="card-text">my text</div> 
      <div class="card-footer">my footer</div> 
     </div> 
     <div class="card col-sm-6 col-lg-3 border-right-0"> 
      <div class="card-img-top"><img src="pic.jpg" /></div> 
      <div class="card-body"> 
       <p class="card-text">my text</div> 
      <div class="card-footer">my footer</div> 
     </div> 
     <div class="card col-sm-6 col-lg-3"> 
      <div class="card-img-top"><img src="pic.jpg" /></div> 
      <div class="card-body"> 
       <p class="card-text">my text</div> 
      <div class="card-footer">my footer</div> 
     </div> 
    </div> 

注意を使用して、card-blockはカードに内側の列を置く方が良いでしょうalpha 6 to beta

からcard-bodyに変更。

Answer 2

ブートストラップ4にはカードに追加できるborder classesがあります。最後のカードを除くすべてのカードにborder-right-0クラスが追加されたコードがあります。

<div class="row no-gutters"> 
     <div class="card col-sm-6 col-lg-3 border-right-0"> 
      <div class="card-img-top"><img src="pic.jpg" /></div> 
      <div class="card-body"> 
       <p class="card-text">my text</div> 
      <div class="card-footer">my footer</div> 
     </div> 
     <div class="card col-sm-6 col-lg-3 border-right-0"> 
      <div class="card-img-top"><img src="pic.jpg" /></div> 
      <div class="card-body"> 
       <p class="card-text">my text</div> 
      <div class="card-footer">my footer</div> 
     </div> 
     <div class="card col-sm-6 col-lg-3 border-right-0"> 
      <div class="card-img-top"><img src="pic.jpg" /></div> 
      <div class="card-body"> 
       <p class="card-text">my text</div> 
      <div class="card-footer">my footer</div> 
     </div> 
     <div class="card col-sm-6 col-lg-3"> 
      <div class="card-img-top"><img src="pic.jpg" /></div> 
      <div class="card-body"> 
       <p class="card-text">my text</div> 
      <div class="card-footer">my footer</div> 
     </div> 
    </div> 

https://codepen.io/cowanjt/pen/xLyPZG