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

时间:2015-04-18 20:04:00

标签: css twitter-bootstrap twitter-bootstrap-3

我试图用类" 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

3 个答案:

答案 0 :(得分:0)

尝试为按钮分区设置边距

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

答案 1 :(得分:0)

根据我的经验,在右下方放置一些东西最好通过将其放置absolute来完成。这是迄今为止最简单,最具活力的&#39;这样做的方式。 css并不那么难:

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

这确实需要您将该按钮组直接移动到.leftbar中,因此它使用正确的元素来定位。这是nessecary,因为.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>

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

(请注意,我已将col课程更改为xs只是为了让他们出现在那个小小提琴面板中,您可以轻松地将它们更改回md当然)

答案 2 :(得分:-1)

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

请参阅此处了解使用容器的示例 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>