在引导程序中调整右拉

Posted 2023-03-07

【中文标题】在引导程序中调整右拉

【英文标题】：Tweak pull-right in bootstrap

【发布时间】：2014-08-05 07:56:02

【问题描述】：

我希望按钮也位于带有“border-blue”的 div 内，但它没有。如果我从按钮的类中删除'pull-right'，它将在其中。那么，如何将按钮保留在 div 内，并将其浮动到右侧。

http://www.bootply.com/KRnvb6Kk4W

HTML：

<form id="LoginForm">
    <div class="container-fluid">
        <div class="row-fluid">                
            <div class="centering text-center col-lg-3 border-blue">
                <div class="drop-shadow raised">
                    <input type="text"/>
                </div>
                <br />
                <div class="drop-shadow raised">
                    <input type="text"/>
                </div>
                <br />
                <div>
                    <span id="spMsg"></span>
                    <button type="submit" class="btn-login-base pull-right">
                        <i class="fa fa-share-square"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    </form>

CSS：

.border-blue border:1px solid blue;

.row-fluid 

  height: 100%; 
  display:table-cell; 
  vertical-align: middle;  


.centering 

  float:none;
  margin:0 auto;
  padding:0;  

.btn-login-base

    width:32px;
    height:34px;
    padding:0;
    background:transparent;
    border:none;        

//bootstrap's .pull-rightfloat:right !important;

【问题讨论】：

getbootstrap.com/css/#helper-classes-clearfix

【参考方案1】：

将.clearfix 类添加到.border-blue，如下所示：

 <div class="centering text-center col-lg-3 border-blue clearfix">

由于内部浮动元素，它会强制容器不要折叠。

【讨论】：

OP - 当您找到可行的解决方案时，请记住将答案标记为正确 :)

@VincentWilkie OP 是什么意思？