Question

我想将所有三个按钮对齐到右边。我正在使用pull-right来实现这种效果，但它甚至没有让这个按钮像一个像素。这段代码有什么问题？

<div class="row">
        <div class="col-md-2">
            <button type="button" class="btn btn-block btn-primary pull-right" ng-click="reset()">Reset</button>
        </div>
        <div class="col-md-2">
            <button type="button" class="btn btn-block btn-primary pull-right" ng-click="goNext('/login')">Cancel</button>
        </div>
        <div class="col-md-2">
            <button type="submit" class="btn btn-block btn-primary pull-right">Register</button>
        </div>
    </div>

注意：我不想使用任何javascript或jquery代码来带来这种效果

Answer 1

你可能正在寻找这样的东西 - 这会创建一个跨越行的整个可用宽度的单个大列，而右拉将所有按钮向右移动，这会将重置移到最右边

<div class="row">
    <div class="col-xs-12 col-md-12">
        <button type="button" class="btn btn-primary pull-right" ng-click="reset()">Reset</button>
        <button type="button" class="btn btn-primary pull-right" ng-click="goNext('/login')">Cancel</button>
        <button type="submit" class="btn btn-primary pull-right">Register</button>
    </div>
</div>

这保留了顺序 - 不同之处在于现在我们在包装单元格上使用文本右键将所有内容移动到右边

<div class="row">
    <div class="col-xs-12 col-md-12 text-right">
        <button type="button" class="btn btn-primary" ng-click="reset()">Reset</button>
        <button type="button" class="btn btn-primary" ng-click="goNext('/login')">Cancel</button>
        <button type="submit" class="btn btn-primary">Register</button>
    </div>
</div>

现在，如果你想要块（伸展2列），你必须使用列偏移而不是浮动或对齐将按钮移动到右边

<div class="row">
    <div class="col-md-offset-6 col-md-2">
        <button type="button" class="btn btn-block btn-primary" ng-click="reset()">Reset</button>
    </div>
    <div class="col-md-2">
        <button type="button" class="btn btn-block btn-primary" ng-click="goNext('/login')">Cancel</button>
    </div>
    <div class="col-md-2">
        <button type="submit" class="btn btn-block btn-primary">Register</button>
    </div>
</div>

拉右不对齐我的按钮

1 个答案: