Bootstrap-Spalten funktionieren nicht beim Setzen von Margin

Ich habe zwei Zeilen, jede von ihnen in 2 Spalten mit col-sm-6 unterteilt. Solange ich den Code so behalte, wie er ist, funktionieren die Spalten, aber die Abschnitte bleiben alle zusammen; so, wenn ich versuche, ihnen einen gewissen Spielraum zu geben, indemBootstrap-Spalten funktionieren nicht beim Setzen von Margin

.col-sm-6 { margin: 15px; }

in der CSS-Einstellung, die Spalten brechen und alle vertikal geteilt bekommen. Egal, welche Art von Marge ich einstelle, es wird mir immer das gleiche Problem geben. Ich habe auch andere mögliche Lösungen versucht, aber ich kann es nicht lösen. Was mache ich falsch?

<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>

Dies ist die 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; 
}

Quelle

2017-09-10 sineotic

https://stackoverflow.com/questions/24340293/bootstrap-grid-margin –

Tatsächlich ist das Bootstrap-Grid-System muss über Ihre margin-left und margin-right Eigenschaften nehmen zu arbeiten. Wenn Sie diese überschreiben, wird es nicht wie vorgesehen funktionieren. Zwei mögliche Lösungen:

Wenn Sie nur für vertikalen Abstand suchen, verwenden Sie margin-top oder margin-bottom statt margin.
Setzen Sie Ihre <div class="container"> in Ihrem <div class="cols-xs-6">. Die Ränder gelten dann für den Container innerhalb der Grenzen der Spalte div.

Quelle

2017-09-10 23:46:41 arbuthnott

1. Ich habe bereits versucht, nur 'margin-top' zu setzen und' margin-bottom' zu sehen, ob es gab mir das gleiche Problem, und das tat es nicht, aber ich brauche auch "margin-left" und "margin-right" und sie sind genau das, was das Problem verursacht. – sineotic

Versuch Ansatz 2. – arbuthnott

2. Ich versuchte dies vor ein paar Minuten, es gibt mir nicht das gleiche Problem, aber das Ergebnis ist noch schlimmer. – sineotic

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>

Quelle

2017-09-11 12:07:03

Bootstrap-Spalten funktionieren nicht beim Setzen von Margin

Antwort

Verwandte Themen