Wie werden Ränder zu horizontalen Panels im Bootstrap hinzugefügt?

Question

Ich habe einen Satz von 3 horizontalen Platten. Ich möchte etwas Polsterung zwischen jedem Panel hinzufügen, damit es besser aussieht. So sieht es derzeit aus.

Hier ist mein html

<div class="container-fluid"> 
 
<div class="row"> 
 

 

 
<div class="col-md-4 panel panel-default"> 
 

 
    <div class="panel-heading"> 
 
    <h3 class="panel-title">Eating Healthy</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
    <p class="panel-content"> 
 
     Hello, it's me. I was wondering, if after all these years you'd like to meet. To go over everything. They say that time's supposed to heal ya. But i ain't done much healing. Hello. Can you hear me? I'm in California. Dreamin about who we used to be, when we were young and free. 
 
    </p> 
 
    </div> 
 
</div> 
 

 

 

 
<div class="col-md-4 panel panel-default "> 
 
    <div class="panel-heading"> 
 
    <h3 class="panel-title">Health Calculators</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
    <p class="panel-content"> 
 
     Hello, it's me. I was wondering, if after all these years you'd like to meet. To go over everything. They say that time's supposed to heal ya. But i ain't done much healing. Hello. Can you hear me? I'm in California. Dreamin about who we used to be, when we were young and free. 
 
    </p> </div> 
 
</div> 
 

 

 
    <div class="col-md-4 panel panel-default "> 
 
    <div class="panel-heading"> 
 
     <h3 class="panel-title">Health and Awareness</h3> 
 
    </div> 
 
    <div class="panel-body"> 
 
     <p class="panel-content"> 
 
     Hello, it's me. I was wondering, if after all these years you'd like to meet. To go over everything. They say that time's supposed to heal ya. But i ain't done much healing. Hello. Can you hear me? I'm in California. Dreamin about who we used to be, when we were young and free. 
 
     </p> </div> 
 
    </div> 
 
</div> 
 
</div>

Ich habe versucht, "margin-außen: 10%" in meinem application.css.scss aber das hat nichts Polsterung zwischen den Platten hinzuzufügen. Ich bin nicht ganz sicher, wie das zu beheben ist, jede Hilfe wird sehr geschätzt.

Answer 1

Verwenden Sie nicht die Panel-Klassen in demselben Div, das die Col-Klassen hat.

<div class="col-md-4"> 
<div class="panel panel-default "> 
     <div class="panel-heading"> 
     <h3 class="panel-title">Health Calculators</h3> 
     </div> 
     <div class="panel-body"> 
     <p class="panel-content"> 
      Hello, it's me. I was wondering, if after all these years you'd like to meet. To go over everything. They say that time's supposed to heal ya. But i ain't done much healing. Hello. Can you hear me? I'm in California. Dreamin about who we used to be, when we were young and free. 
     </p> </div> 
    </div> 
</div> 

http://www.bootply.com/Bri4UcQ7Zi