Question

我希望按钮也可以在div中使用'border-blue'，但事实并非如此。如果我从按钮的类中删除'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">

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

在引导程序中向右拉

1 个答案: