bootstrap 3从右下方切断右拉按钮

Question

我有这个HTML：

<button type="submit" class="btn btn-default pull-right" id="loginBtn" >Login</button>

添加pull-right会使按钮从底部切断：

我该如何解决这个问题？

Answer 1

确保它在Bootstrap form-group ..

中

<form class="form col-md-12 center-block">
            <div class="form-group">
              <input type="text" class="form-control input-lg" placeholder="Email">
            </div>
            <div class="form-group">
              <input type="password" class="form-control input-lg" placeholder="Password">
            </div>
            <div class="form-group">
              <button class="btn btn-primary btn-lg pull-right">Login</button>
            </div>
</form>

演示：http://bootply.com/106344

Answer 2

Bootstrap 3按钮类“btn”添加display：inline-block，“将元素显示为内联级块容器。此块的内部格式为块级别框，元素本身格式为内联级框“（http://www.w3schools.com/cssref/pr_class_display.asp）。解决这个问题的方法是尝试在父级周围使用“clearfix”类（如上所述）。您也可以尝试将按钮包装在div中：

<div class="pull-right"><button></button></div>