无法在 div bootstrap 中设置底部边距

Question

我正在尝试使用 class "thisrow" 为 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>

http://i.stack.imgur.com/6KEpg.png

Answer 1

尝试为按钮分区设置边距

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

Answer 2

我认为你应该使用一个额外的容器来将你的按钮与底部放在一起。

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

Bootstrap 3 个容器示例和常见误用

在桌面模式下查看

scotch.io

演示行为橙色

切换填充以帮助可视化更多

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

Answer 3

根据我的经验，将某些内容放在右下角的最佳位置是 absolute。这是迄今为止最简单和最 'dynamic' 的方法。 css 没那么难：

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

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

我正在清理你的 HTML。如您所见，那里有很多不需要的元素。下面标记的结果应该与您的代码相同，并且更清晰，更容易理解 imo:

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

和演示：http://jsfiddle.net/2tg55z5n/

（请注意，我将您的 col 类更改为 xs 只是为了让它们显示在那个小 fiddle 面板中，您可以轻松更改它们当然回到 md）

无法在 div bootstrap 中设置底部边距

Unable to set bottom margin in a div bootstrap

css

twitter-bootstrap

twitter-bootstrap-3

在桌面模式下查看