Тянуть вправо, а не вправо, выравнивая мои кнопки
Я хочу выровнять все три кнопки вправо. Я использую 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>