在引导程序中调整右拉

Question

我希望按钮也位于带有“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-right{float:right !important;}

Answer 1

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

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

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