自举拉右引起元素重叠 [英] Bootstrap pull-right causing element overlap

问题描述

当我将右拉类添加到按钮时，我想要将一个按钮放在列表上方，但按钮位于右列。 （或一个包含div）按钮然后与列表重叠。

 < div> 
< div class =pull-right> 
< button type =buttonclass =btn btn-default>添加< / button> 
< / div> 
< ul class =list-group> 
< li class =list-group-item>东西1< / li> 
< li class =list-group-item>东西2< / li> 
< li class =list-group-item>东西2< / li> 
< / ul> 
< / div> 
  

jsfiddle： http://jsfiddle.net/paulbau/384YH/

解决方案

您应该添加 pull-right 类替换为按钮元素，然后向父元素添加一个clearfix。在这种情况下， div 不会自行折叠。 $ b

更新示例

  < div class =clearfix> 
< button type =buttonclass =btn btn-default pull-right> Add< / button> 
< / div> 
  

---

另外，由于按钮是一个 inline-block level元素，您可以避免浮动它并使用 text-align：right 代替。只需将类 text-right 添加到父级。您不再需要clearfix，因为按钮元素不会从文档流中移除。

示例Here

 < div class =text-right> 
< button type =buttonclass =btn btn-default>添加< / button> 
< / div> 
  

I am trying to get a single button positioned above a list, but with the button to the right.

When I add the pull-right class to the button (or a containing div) the button is then overlapped by the list.

<div>
    <div class="pull-right">
        <button type="button" class="btn btn-default">Add</button>
    </div>
    <ul class="list-group">
        <li class="list-group-item">Something something 1</li>
        <li class="list-group-item">Something something 2</li>
        <li class="list-group-item">Something something 2</li>
    </ul>
</div>

jsfiddle: http://jsfiddle.net/paulbau/384YH/

解决方案

You should add the pull-right class to the button element instead and then add a clearfix to the parent element. In doing so, the div won't collapse upon itself.

Updated Example

<div class="clearfix">
    <button type="button" class="btn btn-default pull-right">Add</button>
</div>

---

Alternatively, since the button is an inline-block level element, you could avoid floating it and use text-align:right instead. Just add the class text-right to the parent. You no longer need the clearfix because the button element isn't being removed from the document flow.

Example Here

<div class="text-right">
    <button type="button" class="btn btn-default">Add</button>
</div>

这篇关于自举拉右引起元素重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！