如何在引导程序中向水平面板添加边距?

时间:2016-04-18 18:46:43

标签: ruby-on-rails-3 twitter-bootstrap-3

我有一套3个水平面板。我想在每个面板之间添加一些填充,以便它看起来更好..这就是它目前的样子。 enter image description here

这是我的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>

我在application.css.scss中尝试了“margin-outside:10%”但是没有在面板之间添加填充。我不太清楚如何解决这个问题,非常感谢任何帮助。

1 个答案:

答案 0 :(得分:2)

不要在具有col类的同一div中使用面板类。

 <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