Css 无法在div引导中设置底部边距

我试图为这一行的类设置一个div的底部边距，但无法使其工作。基本上，我希望那一行在卡片的底部

代码如下：

    <div class="leftbar" style="margin-top:10px;">
      <div class="row">
        <div class="col-md-4">
          <div style="background:#ffc016; height:150px;">
            <div class="text-center">
                Company Name
            </div>      
          </div>
        </div>
        <div class="col-md-8">
          <div class="row">
            <div class="col-md-10">
                <h4>Summer Communication Intern</h4>
            </div>
            <div class="col-md-2 text-right heart"><a href="#"><span class="glyphicon glyphicon-heart-empty"></span></a></div>
          </div>

          <div class="row">
            <div class="col-md-3"><small>Nike Inc</small></div>
            <div class="col-md-3"><small>England</small></div>
            <div class="col-md-3"><small>Internship</small></div>
            <div class="col-md-3"><small>&nbsp;</small></div>
          </div>

          <div class="row thisrow">
            <div class="col-md-2">&nbsp;</div>
            <div class="col-md-10 text-right heart">
                <div class="btn-group" role="group" aria-label="...">
                    <span class="btn btn-default monthly"><small>Save</small></span>
                    <a class="btn btn-default applynow">View</a>
                </div>
            </div>
          </div>
        </div>
      </div>
      </div>

---

尝试将边距设置为按钮分割

<div class="btn-group" role="group" aria-label="..." style="margin-top:_px">
                    <span class="btn btn-default monthly"><small>Save</small></span>
                    <a class="btn btn-default applynow">View</a>
                </div>

---

我认为你应该用一个额外的容器把你的按钮和底部的部分放在一起

有关使用容器的示例，请参见此处

Bootstrap 3容器示例和常见误用

在桌面模式下查看 演示者

一排是橙色的

切换填充以帮助显示更多内容

<main>

    <section id="with-container-example">
        <h2>With Container</h2>
        <div class="container">
            <div class="row">
                <p class="absolute-example">
                This is positioned-absolute, relative to the row to help visualize
                </p>
                <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
                <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
                <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
            </div>
        </div>
    </section>


    <section id="with-no-container">
        <h2>With No Container</h2>
        <div class="row">
            <p class="absolute-example">
            This is positioned-absolute, relative to the row to help visualize
            </p>
            <div class="col-xs-4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
            </div>
            <div class="col-xs-4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
            </div>
            <div class="col-xs-4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
            </div>
        </div>
    </section>

    <section id="with-container-fluid">
        <h2>With Container-Fluid</h2>
        <div class="container-fluid">
            <div class="row">
                <p class="absolute-example">
                This is positioned-absolute, relative to the row to help visualize
                </p>
                <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
                <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
                <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
            </div>
        </div>
    </section>

</main>

---

根据我的经验，将某物放置在右下角最好是将其放置在绝对位置。这是迄今为止最简单、最“动态”的方法。css没有那么难：

.leftbar {
    position: relative;
}
.bottom-right {
    position: absolute;
    bottom: 0;
    right: 15px; /* == padding of .row in TB3 */
}

这确实需要您将该按钮组直接移动到.leftbar中，以便它使用正确的元素来定位。这是因为.col在TB3中默认获得相对位置

我继续清理你的HTML，而我是在它。正如你所看到的，有很多元素是不需要的。以下标记的结果应与您的代码相同，并且更干净、更易于理解：

<div class="leftbar row" style="margin-top:10px;">

    <div class="col-xs-4 text-center" style="background:#ffc016; height:150px;">
        Company Name
    </div>

    <div class="col-xs-8"> 
        <a href="#" class='pull-right'>
            <i class="glyphicon glyphicon-heart-empty"></i>
        </a>
        <h4>Summer Communication Intern</h4>

        <ul class="row">
            <li class="col-xs-3">
                <small>Nike Inc</small>
            </li>
            <li class="col-xs-3">
                <small>England</small>
            </li>
            <li class="col-xs-3">
                <small>Internship</small>
            </li>
        </ul>       
    </div>

    <div class="btn-group bottom-right" role="group" aria-label="...">
        <span class="btn btn-default monthly">
            <small>Save</small>
        </span>
        <a class="btn btn-default applynow">
            View
        </a>
    </div>

</div>

还有一个演示：

---

请注意，我将您的col类更改为xs，这样它们就可以显示在小的小提琴面板中，您可以同样轻松地将它们更改回md当然

您可以添加与之相关的CSS吗？这是引导。使用style=，在代码本身中添加了额外的css。剩下的只是一些颜色/字体大小。没什么了。你能提供一把小提琴吗？这是我想要的屏幕尺寸，但不是所有的屏幕尺寸。谢谢你也清理了房间。它神奇地工作：我继续使用Pevara的解决方案。非常感谢。不知道是谁否决了你：我不是Bootstrap方面的专家，只是给出了一个可能有效的解决方案。当时我没有时间亲自测试。但最重要的是，你找到了一个解决方案，这是佩瓦拉的解决方案。