ブートストラップマージンを置くとカラムが機能しない

Question

私は2つの行を持っていますが、それぞれが2つのカラムに分割されてcol-sm-6です。私がコードをそのまま保っている限り、カラムは機能しますが、セクションはすべて一緒になっています。私はCSSで.col-sm-6 { margin: 15px; }

を設定することにより、それらにいくつかの余裕を与えることを試みるときに、列が破損し、すべての縦割りを得ます。どのようなマージンを置いても、常に同じ問題が発生します。私はこれ以外の解決策をいくつか試しましたが、それでも解決できません。何が間違っているのですか？

<div class="container"> 

<div class="row"> 
    <div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/nature/1600x900);"> 
    <div class="opacity-overlay"> 
    <h2>Section 1</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div> 
</div> 

<div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/food/1600x900);"> 
    <div class="opacity-overlay"> 
    <h2>Section 2</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div> 
    </div> 
</div> 


<div class="row"> 
    <div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/people/1600x900);"> 
    <div class="opacity-overlay"> 
    <h2>Section 3</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div> 
</div> 

<div class="col-sm-6 categories" style="background-image: url(https://source.unsplash.com/category/Objects/1600x900);"> 
    <div class="opacity-overlay"> 
    <h2>Section 4</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div> 
    </div> 
</div> 

</div> 

これはCSSです：

.categories { 
    text-align: center; 
    background-position: center center; 
    background-size: cover; 
    color: black; 
    padding: 50px; 
} 

.opacity-overlay { 
    background: rgba(255, 255, 255, 0.85); 
    padding: 1px 20px 10px 20px; 
} 

Answer 1

確かに、ブートストラップグリッドシステムが動作するようにあなたのmargin-leftとmargin-right性質を引き継ぐ必要があります。これらをオーバーライドすると、意図したとおりに動作しません。 2つの解決策は：

1. あなただけの垂直間隔を探している場合は、margin-topまたはmargin-bottomではなくmargin使用しています。

2. <div class="cols-xs-6">の中に<div class="container">を入れてください。マージンは、列divの範囲内のコンテナに適用されます。

Answer 2

Try Using this 

<div class = "row"> 
    <div class = "col-sm-6"> 
    <div class = "col-sm-12"> 
     Your Content 
    </div> 
    </div> 
    <div class = "col-sm-6"> 
    <div class = "col-sm-12"> 
     Your Content 
    </div> 
    </div> 
</div>