Тянуть вправо, а не вправо, выравнивая мои кнопки

Я хочу выровнять все три кнопки вправо. Я использую 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-код для достижения этого эффекта

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>
Другие вопросы по тегам