表格中的md按钮位置对齐

时间:2016-02-02 22:23:51

标签: angularjs ng-animate angularjs-material angularjs-ng-include

我使用ng-include来调用我的表单" test_form",显示按钮在中心对齐。如何在表格的右下角对齐它们?

的index.html

<div class="col-sm-6 sidenav">
  <!-- menu bar content at the top -->
<div class="column-nav-form" ng-include = "'/views/html/test_form.html'" >
</div>

test_form.html

<form name="testForm" ng-app="myApp" ng-controller="FormController" class="container-fluid" ng-submit="submit()">
<!-- form labels -->
    <md-button class="md-raised md-primary testForm" type ="button" ng-click ="reset()">CANCEL</md-button>
    <md-button class="md-raised md-primary testForm" ng-disabled="testForm.$invalid">SAVE</md-button>
</form>

CSS

.md-button.md-raised.md-primary.testForm {
    position: right !important;
    color: #FFFFFF;
    background-color: #4CAF50;
}

表格按钮显示:

enter image description here

1 个答案:

答案 0 :(得分:0)

拉右派做了这个伎俩。

$min-font: 0.875;
$max-font: 1.3;
$min-font-media: 20;
$max-font-media: 40;

html {
  font-size: $min-font + rem;
}
@media (min-width: $min-font-media + rem) {
  html {
    font-size: calc(#{$min-font + rem} + (#{$max-font} - #{$min-font})* ((100vw - #{$min-font-media + rem})/(#{$max-font-media} - #{$min-font-media})))
  }
}
@media (min-width: $max-font-media + rem) {
  html {
    font-size: $max-font + rem;
  }
}